/* NAMU */

html, body, div, p, ul, ol, li, h1, h2, h3, h4, pre, form, p, button, img, a img, figure, figcaption { border: 0 none; margin: 0; padding: 0; }
ul, li { list-style-type: none; }
* { box-sizing: border-box; }

/* remove outlines from focused elements */
input:focus, textarea:focus, select:focus, a:focus, .textarea_autogrow { outline: none; }

html { font-size: 16px; font-stretch: 100%; }

/* color variables */
:root 
	{
	--white: #ffffff;
	--black: #222;
	--red: #eb5555;
	--blue: #0044a5;
	--lightblue: #6fa9fb;
	--white_transparent: #ffffffd9;
	--black_transparent: #000000e0;
	--gray1: #edf1f3;
	--gray12: #dee6e9;
	--gray2: #a3aeb3;
	--gray22: #d8e0e3;
	--gray3: #83868b;
	--gray4: #5b5e62;
	--gray5: #484c4f;
	--border_light: #cbd0d5;
	--border_dark: #8b8d8f;
	--shadow: #40424547;
	}

/* preloader */
#loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--white); display: flex; justify-content: center; align-items: center; z-index: 9998; }
#loading-screen .progress-bar { position: fixed; top: 0; left: -100%; width: 100%; height: 5px; background-color: var(--blue); animation-name: progress-bar; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-delay: 1s; }
#loading-screen img { width: 8rem; filter: grayscale(1); opacity: 0; animation-name: logo; animation-duration: 0.5s; animation-iteration-count: 1; animation-timing-function: linear; animation-delay: 5s; animation-fill-mode: forwards; }
@keyframes progress-bar { from { left: -100%; } to { left: 100%; } }
@keyframes logo { from { opacity; 0 } to { opacity: 0.2; } }
body.loaded #loading-screen { display: none; }

/* font definitions */

@font-face 
	{
	font-family: 'RobotoFlex';
	src: url('fonts/roboto-flex.ttf') format('truetype'); 
    font-weight: 400 700; /* Define the weight range */
    font-stretch: 100%; /* Define the width range */
	}	

@font-face 
	{
	font-family: 'Alternate';
	src: url('fonts/alternate-got-no-2d.woff') format('woff'); 
	font-weight: 600; font-style: normal;
	}	

/* headings and UI */
.font_heading1 { font-family: 'Alternate', sans-serif; font-size: 5.25rem; line-height: 90%; letter-spacing: -1.25px; text-transform: uppercase; color: var(--blue); }
.font_heading2 { font-family: 'Alternate', sans-serif; font-size: 3rem; line-height: 90%; letter-spacing: -0.3px; text-transform: uppercase; }
.font_heading3 {  }
.font_heading4 { font-family: 'Alternate', sans-serif; font-size: 3rem; line-height: 90%; letter-spacing: -0.3px; text-transform: uppercase; line-height: 3.25rem; color: var(--gray5);}

.font1 { font-family: 'RobotoFlex', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.125em }
.font2 { font-family: 'RobotoFlex', sans-serif; font-weight: 700; font-size: 1.2rem; }
.font22 { font-family: 'RobotoFlex', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.25rem; }
.font23 { font-family: 'RobotoFlex', sans-serif; font-weight: 400; font-size: 2rem; line-height: 2.5rem; }

/* article fonts */
.font3 { font-family: 'RobotoFlex', sans-serif; font-size: 1.2rem; font-weight: 400; }
.font4 { font-family: 'RobotoFlex', sans-serif; font-size: 0.95rem; font-weight: 400; line-height: 1.5em; }

/* menu */
.font5 { font-family: 'RobotoFlex', sans-serif; font-weight: 700; font-size: 1.2rem; }

a { color: inherit; text-underline-offset: 2px; text-decoration: none; cursor: pointer; }
::selection { color: var(--white); background: var(--black); opacity: 0.9 }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--gray1) inset; }

i, em { font-style: normal; font-variation-settings: "slnt" -10; }

.gray { color: var(--gray3); } 
.blue { color: var(--blue); }
.dark { background-color: var(--gray1); }
.darker { background-color: var(--gray12); }
.paragraph { margin-bottom: 1rem; }
.hidden { display: none !important; }
.flex { display: flex !important; }
.red_backgroud { background: var(--red); }
.blue_background { background: var(--blue); }
.gray_background { background: var(--gray2) !important; }
.sticky { position: fixed; bottom: 0; }
.default_cursor { cursor: default !important; }

body { font-family:  'RobotoFlex', Arial, sans-serif; background: var(--white); color: var(--black); line-height: 1.75em; }
input, textarea, button { font-family: "RobotoFlex", Arial, sans-serif; }

.spacer10 { width: 100%; height: 10vh; }
.spacer40 { width: 100%; height: 40vh; }

.button { cursor: pointer; text-underline-offset: 3px; }

.button1 { display: inline-flex; padding: 0 0.75rem; border: 0; background: var(--gray2); color: var(--white); align-items: center; white-space: nowrap; line-height: 1.6rem; border-radius: 3px; cursor: pointer; transition: background 0.1s }
.button1:hover { background: var(--gray3); }
.button1.highlight { cursor: pointer; margin: 0 auto 0 0; transition: opacity 0.1s; }
.button1.highlight:hover { opacity: 0.9 }

.button2 { display: block; padding: 0 0.7rem 0.1rem 0.7rem; border: 0; background: var(--blue); color: var(--white); align-items: center; white-space: nowrap; line-height: 1.6rem; border-radius: 3px; }
.button2::first-letter { text-transform: capitalize; }
.button2 span { margin-left: 0.4rem; color: var(--white); font-size: 1.25rem; opacity: 0.5; display: block; float: right; transition: opacity 0.1s; }
.button2:hover span { opacity: 1; }

.button3 { display: inline-flex; padding: 0.5rem 1rem; border: 0; text-decoration: none !important; background: var(--blue); color: var(--white); align-items: center; white-space: nowrap; line-height: 1.6rem; border: 0; border-radius: 3px; cursor: pointer; transition: opacity 0.2s; }
.button3:hover { opacity: 0.8; }

.button4 { display: inline-flex; margin: 0 auto 0 0; border: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--blue); align-items: center; white-space: nowrap; line-height: 1.6rem; transition: opacity 0.1s }
.button4:hover { opacity: 0.9; }

.small_button { display: inline-flex; width: 2rem; cursor: pointer; margin-left: -1px; padding: 0.5rem 1rem 0.25rem 0px; opacity: 0.6; transition: opacity 0.1s; }
.small_button:hover { opacity: 0.7; }

span.external { width: 1em; height: 0.8em; display: inline-block; background-size: 0.65em; background-repeat: no-repeat; margin-left: 0.25rem; opacity: 0.8; }

.error { color: var(--red); position: absolute; left: 50%; top: 45%; line-height: 4rem;  transform: translate3d(-50%, -50%, 0px); font-size: 4rem; font-weight: 700; }

/* basic dimensions */

main { display: flex; flex-wrap: wrap; width: 100%; }
section { width: 100%; }
section .container { margin: auto; padding: 4rem 4rem; }
.container { max-width: 1500px; }
.container.narrow, .narrow { max-width: 1200px; }
.container.compact, .compact { max-width: 960px; }
.container.condensed { padding: 1rem 4rem; }
section .container.background { background-position: center center; background-size: 100%; object-fit: cover; background-repeat: no-repeat; }

/* top page infobar */

.infobar { width: 100%; color: var(--gray1); background: var(--red); overflow: hidden; text-align: center; padding: 0.70rem 4rem 0.75rem 4rem; line-height: 1.25em; }
.infobar a { text-decoration: underline; text-decoration-thickness: 0.125rem; }

/* header */

header { width: 100%; }
header .container { margin: auto; padding: 3rem 4rem 3.1rem 4rem; gap: 0 1.5rem; display: grid; width: 100%; grid-template-columns: 26% 62% 8%; }
header .logo  { grid-row: 1/3; grid-column: 1/1; }
header .searchform { grid-row: 1/1; grid-column: 2/2; }
header .cart_section { grid-row: 1/3; grid-column: 3/3; }
header .menu { grid-row: 2/2; grid-column: 2/2; }
header .logo img { width: 18.8rem; display: block; transition: width 0.2s }
header .logo h1 { display: none; }
header .searchform { width: 100%; display: flex; justify-content: center; }
header .searchform input { width: 70%; min-width: 10rem; background: var(--gray1); border: 0; border-radius: 50px 0 0 50px; font-size: 1rem; padding: 0 10px; line-height: 1em; height: 2.25rem; text-overflow: ellipsis;  }
header .searchform input::placeholder { color: var(--gray2); }
header .searchform button { background-color: var(--gray1); border: 0; border-radius: 0 50px 50px 0; font-size: 1rem; padding: 0 10px; line-height: 1em; height: 2.25rem; }
header .searchform button img { height: 0.95rem; opacity: 0.5; cursor: pointer; }
header .menu_button, header .menu_close { display: none; }
header .cart_section { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
header .cart { display: flex; align-items: center;  transition:  opacity 0.2s; }
header .cart:hover { opacity: 0.9; }
header .cart img { width: 2.5rem; opacity: 0.9 }
header .cart_count { font-size: 1rem; color: var(--white); width: 2rem; height: 2rem; margin-right: 0.25rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; } 
header nav { margin-top: 0.75rem; }
header nav ul { display: flex; align-items: center; width: 100%; justify-content: center;  white-space: nowrap;}
header nav li { display: inline-block; line-height: 1em; }
header nav li:not(:last-child) { border-right: 1px solid var(--border_light); padding-right: 1rem ; margin-right: 1rem; }
header .social img { height: 1.5rem; display: inline-block; opacity: 0.8; padding: 0 0.1rem; transition: opacity 0.2s }
header nav a { transition: opacity 0.1s; }
header nav a:hover { opacity: 0.8 }

.menu_open { display: block !important; }

.add_to_cart_notification { display: flex; align-items: center; position: fixed; gap: 1.3rem; bottom: 4rem; right: -20rem; width: 19rem; background: var(--blue); color: var(--white); padding: 0.75rem 1.5rem; box-shadow: 0 0 5px #00000045; z-index: 9; border-radius: 3px 0 0 3px; transition: opacity 0.2s; }
.add_to_cart_notification img { filter: invert(1); height: 2rem; display: block; }
.add_to_cart_notification:hover { opacity: 0.9; }
.add_to_cart_notification.visible { animation-name: notify; animation-duration: 5s; animation-fill-mode: forwards; animation-timing-function: ease-in;  right: 0 }
.newsletter_notification { display: flex; align-items: center; position: fixed; gap: 1.3rem; bottom: 4rem; right: 0; width: 19rem; background: var(--red); color: var(--white); padding: 0.75rem 1.5rem; box-shadow: 0 0 5px #00000045; z-index: 9; border-radius: 3px 0 0 3px; animation-name: notify; animation-duration: 5s; animation-fill-mode: forwards; animation-timing-function: ease-in; }
@keyframes notify { 
	0% 		{ right: 0; opacity: 1; } 
	85% 	{ right: 0 }
	100% 	{ right: -20rem; } 
	}

/* search autocomplete */

.suggestions { display: none; position: absolute; margin-top: 2.25rem; width: 590px; background-color: var(--white); z-index: 100; border-radius: 5px; overflow: hidden; box-shadow: 0 0 10px #c9cacb; }
.suggestions div { padding: 2px 0.5rem; cursor: pointer; font-size: 0.95rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.suggestions .selected, .suggestions div:hover { background-color: #f0f0f0; }

.feature_content .inner_container  { display: flex; margin: auto; }
.feature_content .item { display: flex; flex-wrap: wrap; align-items: center; align-content: center; word-break: break-word; hyphens: auto; }
.feature_content .cover { display: contents; }
.feature_content .cover img { max-width: 30%; height: fit-content; margin-right: 3.5rem; box-shadow: 0 10px 30px var(--shadow); transition: transform 0.4s;}
.feature_content .title { margin-top: -0.5rem; }
.feature_content .perex { line-height: 1.4em; margin-top: 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis; max-height: 7em; }
.feature_content .price { color: var(--gray3); display: inline-block; margin-top: 1rem; margin-top: 0.75em }
.feature_content .cover:hover img { transform: scale(1.02); transition: transform 0.2s; }

.selected_content h3 { color: var(--blue); margin-bottom: 2rem; }
.selected_content .grid { display: inline-grid; grid-template-columns: repeat(5, 1fr); align-items: baseline; gap: 3.25rem; transition: gap 0.2s; }
.selected_content.small_preview .grid { grid-template-columns: repeat(6, 1fr); }
.selected_content.compound .grid { grid-template-columns: 38% repeat(3, 1fr); align-items: start; }
.selected_content .item { width: 100%; }
.selected_content img { width: 100%; box-shadow: 0 5px 20px var(--shadow); }
.selected_content .meta { margin-top: 0.5rem; word-break: break-word; hyphens: auto; line-height: 1.4rem; }
.selected_content .price { margin-top: 0.25rem; color: var(--gray3); display: inline-block; font-weight: 600 }
.selected_content .name { margin-bottom: 0.25rem; display: inline-block; }
.selected_content .item img { transition: 0.25s; }
.selected_content .item:hover img { transform: scale(1.025); transition: 0.1s; }

.selected_content .item.large { display: flex; flex-wrap: nowrap; gap: 2rem; align-items: flex-start; }
.selected_content .item.large img { width: auto; max-width: 45.6% }
.selected_content .item.large .perex { line-height: 1.4rem; margin-top: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }

.news .grid { display: inline-grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 3.25rem; }
.news .item { width: 100%; }
.news img { width: 100%; box-shadow: 0 5px 20px var(--shadow); object-fit: cover; }
.news .meta { line-height: 1.4em; margin-top: 0.4rem; word-break: break-word; hyphens: auto; }
.news .perex {line-height: 1.4rem; margin-top: 0.25rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; text-overflow: ellipsis; max-height: 10em; }
.news .name { margin-bottom: 0.25rem; display: inline-block; color: var(--blue); line-height: 1.4rem; }
.news .type { margin-bottom: 0.5rem; display: inline-block; color: var(--gray3); }
.news .date { margin-top: 0.5rem; }
.news .item img { transition: 0.25s; }
.news .item:hover img { transform: scale(1.025); transition: 0.1s; }
.news.list .grid { gap: 1rem 3.25rem } 

.navigation_bar { text-align: right; margin-top: 1rem; width: 100%; }
.navigation_bar a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.tags ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem 2rem;  }
.tags li { display: block; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags li::first-letter { text-transform: capitalize; }
.tags li a { transition: opacity 0.2s; }
.tags li a:hover { opacity: 0.8 }

nav.vertical { width: 25%; min-width: 17rem; line-height: 1.75rem; }
nav.vertical h3 { margin: 0 0 1rem 0; color: var(--blue); }
nav.vertical .closed.items20 li:nth-child(n+18) { display: none; }
nav.vertical .closed.items10 li:nth-child(n+10) { display: none; }
nav.vertical section { margin-bottom: 1rem; }
nav.vertical a:hover, nav.vertical .selected { text-decoration: underline; text-underline-offset: 3px; }
nav.vertical li::first-letter { text-transform: capitalize; }
nav.horizontal { display: flex; justify-content: flex-end; gap: 0.4rem }
nav.horizontal form { display: flex; align-items: center; white-space: nowrap; }
nav.catalogue_filters { margin: 1rem 0 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem }
.catalogue .grid { margin-top: 3rem; }
.catalogue .select { width: 10rem; text-overflow: ellipsis; padding: 0.2rem; margin: 0 0.1rem 0 0.5rem; border: 1px solid var(--gray2); border-radius: 3px }
#catalogue_filter { display: none; }

/* pagination */

.pages { display: flex; gap: 0.3rem; margin: 4rem 0 2rem 0; justify-content: center; flex-wrap: wrap; }
.pages a { display: inline-block; background: var(--gray1); color: var(--black); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; transition: opacity 0.1s; }
.pages a.selected { background: var(--gray5); color: var(--white); }
.pages a:hover { opacity: 0.8; }

/* single item view */
.book .container { display: flex; gap: 5rem; margin-bottom: 5rem;  }
.book .left_section { width: 33.34%; min-width: 33.34%; transition: width 0.2s } 
.book .right_section { width: 66.68%; } 
.book .cover { margin-bottom: 2rem }
.book .cover img { width: 100%; box-shadow: 0 5px 40px var(--shadow); display: block; }
.book .item_tags { margin-top: 1rem; width: 50%; min-width: 17rem; color: var(--gray3); }
.book .item_tags li { display: inline-block; margin-right: 0.25rem; }
.book .item_tags li:not(:last-child):after { content: ", "; }
.book .item_tags a { text-decoration: underline; text-underline-offset: 2.5px; text-decoration-style: dotted; }
.book .buy { width: 100%; margin: 5rem 0 2rem 0; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; }
.book .version { display: flex; cursor: pointer; width: 60%; border-radius: 3px; align-items: center; justify-content: flex-start; background: var(--gray1); white-space: nowrap; overflow: hidden; }
.book .version .price { padding: 0.5rem 1rem; width: 6.5rem }
.book .version .button { color: var(--white); padding: 0.5rem 0.75rem; text-align: center; background: var(--blue); transition: opacity 0.2s; }
.book .version:hover .button { opacity: 0.85; }

.book .version.highlight { animation-name: highlight; animation-duration: 0.5s; }
@keyframes highlight {	from { background: var(--gray2); } to { background: var(--gray1); } }

.book .version .button img { height: 2.25rem; display: block; filter: invert(1); }
.book .meta { margin: 0.25rem 0 2.25rem 0; line-height: 1.4rem }
.book .edition a { text-decoration: underline; text-underline-offset: 2px }
.book .description { background: var(--gray1); padding: 2.5rem 3rem; border-radius: 3px; margin-bottom: 2rem; }
.book .description p { margin-bottom: 1em; }
.book .description a { text-decoration: underline; text-underline-offset: 3px; }

/* not available button */
.book .version.not_available { cursor: default; }
.book .version.not_available .button { background: var(--gray2); }
.book .version.not_available:hover .button { opacity: 1 }
.book .not_available.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted; color: var(--gray3); cursor: pointer; }

.quote { color: var(--white); background: var(--gray5); padding: 1rem 3rem 2.5rem 3rem; border-radius: 3px; }
.quote span { display: inline-block; margin-top: 0.5rem; opacity: 0.75 }
.quote img { filter: invert(0.6); margin-bottom: -0.25rem }

.pdf_preview_button { width: 6rem; display:flex; float: left; margin-right: 0.5rem; flex-wrap: wrap; justify-content: center; cursor: pointer; border-radius: 3px; background: var(--gray5); color: var(--white); align-items: center; overflow: hidden; }
.pdf_preview_button .head { line-height: 1.12rem; text-align: center; background: var(--gray3); width: 100%; padding: 0.5rem 5px; }
.pdf_preview_button .icon { filter: invert(1); display: block; width: 80%; padding: 1rem 0.5rem; transition: opacity 0.25s }
.pdf_preview_button:hover img { opacity: 0.9 }

.pdf_preview { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--black_transparent); display: flex; justify-content: center; align-items: center; z-index: 300; opacity: 0; }
.pdf_preview iframe { width: 75%; height: 90vh; border: 1px solid var(--black); border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); opacity: 0;  }
.pdf_preview .close { position: fixed; top: 2rem; right: 2.5rem; width: 3rem; cursor: pointer; filter: invert(1); transition: opacity 0.2s }
.pdf_preview .close:hover { opacity: 0.65; }

.pdf_preview { animation: anim1; animation-duration: 0.25s; animation-fill-mode: forwards; }
.pdf_preview iframe { animation: anim2; animation-duration: 0.5s; animation-delay: 0.25s; animation-fill-mode: forwards; z-index: 200 }
@keyframes anim1 { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim2 { from { opacity: 0; margin-bottom: -100px } to { opacity: 1; margin-bottom: 0 } }

/* page + article */

.page p, .page ul, .page ol { margin-bottom: 1em; }
.page h3, .page h4 { margin-bottom: 2rem; margin-top: 1rem; }
.page a { text-decoration: underline; text-underline-offset: 3px; }

.page .file_download { border: 1px solid var(--black); background: var(--white); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; line-height: 2.5rem; display: inline-block; width: 75%; border-radius: 3px; overflow: hidden; margin: 0 0.5rem 0rem 0; transition: opacity 0.1s }
.page .file_download:hover { opacity: 0.9 }
.page .file_download .ico { padding: 0.5rem 0.75rem; background: var(--black); margin-right: 0.75rem; display: block; float: left; }
.page .file_download img { height: 1.5rem; display: block; filter: invert(1); }

.page .post_type a { text-decoration:none; }
.page ul li { list-style-type: disc; margin-left: 3rem; }
.page ol li { list-style-type: decimal; margin-left: 3rem; }

.page figure { width: 100%; margin: 2rem 0;}
.page figure figcaption { line-height: 1.35em; }
.page figure img { max-width: 100%; max-height: 60vh; min-height: 400px; object-fit: contain; object-position: left; }

.page .gallery_item { display: block; width: 100%; overflow: hidden; }
.page .gallery_item figure { width: 12em; margin: -2em 2em 0 0; float: left; }
.page .gallery_item figure img { filter: saturate(0); height: 10em; margin-right: 3rem; margin-top: 2rem; min-height: auto; display: block; }

/* cart */

.cart_table { border-collapse: collapse; width: 100%; }
.cart_table td { padding: 1.25rem; line-height: 1.5em; border: 4px solid var(--white); background: var(--gray1); }
.cart_table tr:first-child td { border-top: none; }
.cart_table tr:last-child td { border-bottom: none; }
.cart_table td:first-child { border-left: none; }
.cart_table td:first-child { border-right: none; }

.cart_table td:first-child { border-left: 0 }
.cart_table td:last-child { border-right: 0 }
.cart_table .cover img { height: 8rem; display: block; border-radius: 3px; box-shadow: 0 0 7px #c9cacb; }
.cart_table .cart_control_container { display: flex; justify-content: space-between; }
.cart_table .cart_button { cursor: pointer; }
.cart_table .cart_button img { height: 1.5rem; margin-top: -1px; display: block; opacity: 0.3; transition: opacity 0.1s; }
.cart_table .cart_button:hover img { opacity: 1 }
.cart_table .cart_control { width: 5rem; white-space: nowrap; }
.cart_table .cart_control .cart_control_container div { display: inline-block;  }
.cart_table .cart_control div.amount { padding: 0 0.75rem; }
.cart_table a { text-decoration: underline; text-underline-offset: 3px; }
.cart_table tbody.two_columns { display: grid; grid-template-columns: 50% 50%; gap: 4px; }
.cart_table tbody.two_columns tr { background: var(--gray1); }
.cart_table tbody.two_columns td { width: 100%; display: block; border: 0; }
.cart_table .form_inline_price { color: var(--gray3); white-space: nowrap; }

.check_out_form { width: 100% }
.check_out_form h2 { margin: 1rem 0 2rem 0; }
.check_out_form fieldset { border: 0; margin: 0; padding: 0 }
.check_out_form .radiocontainer { position: relative; padding-left: 2.5rem; }
.check_out_form .form_inline_action { cursor: pointer; }
.check_out_form .form_inline_action:hover { text-decoration: underline; text-underline-offset: 3px; }
.check_out_form .radiocontainer .checkmark { position: absolute; top: -1px; left: 0; height: 1.25rem; width: 1.25rem; background-color:#000; opacity: 0.3; border-radius: 50%; transition: background-color 0.1s; }
.check_out_form .radiocontainer input:checked ~ .checkmark { background-color: #000; opacity: 1; } 
.check_out_form .radiocontainer .radio { display: none; }
.check_out_form .form_inline_message { padding-left: 2.5rem; color: var(--gray3); }
.check_out_form .text_form { width: 100%; background: transparent; border: 0; padding: 0.2rem; font-size: 1rem; }

.order_preview_table { border-collapse: collapse; width: 100%; }
.order_preview_table:first-child td { border-bottom: 0 }
.order_preview_table td { padding: 0.5rem; line-height: 1.25em; border: 1px solid var(--black); vertical-align: top; line-height: 1.5em; }

/* check out text */

.infotext { margin: 2rem 0; line-height: 1.5em; }
.infobox p { margin-bottom: 1em; line-height: 1.5em; }
.infobox .font_heading2 { line-height: 1.125em; }

.tos { display: none; width: 100%; height: 35rem; background: var(--gray1); overflow: hidden; overflow-y: auto; padding: 2rem; margin: 2rem 0 6rem 0 }
.tos h2 { margin-bottom: 1.5em }
.tos p { margin-bottom: 0.5rem; line-height: 1.4em}

/* cookiebar */

.cookiebar { position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 200; color: var(--white); background: var(--blue); box-shadow: 0 10px 30px #00000094; }
.cookiebar .container { padding: 3.5rem 4rem }
.cookiebar button { margin-top: 1rem }
.cookiebar .cookie_yes { background: var(--gray3); }
.cookiebar .cookie_no { background: var(--gray4); }

/* footer */

footer { width: 100%; background: var(--gray5); color: var(--white_transparent); }

footer .container { margin: auto; padding: 4rem 4rem 7rem 4rem; }
footer .grid { display: flex; align-items: start; gap: 2.5rem; }
footer .item { width: 100%; line-height: 1.4rem; }
footer .item img { max-width: 100%; }
footer a { text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 0.5px; text-underline-offset: 3px; text-decoration-color: var(--border_dark); transition: 0.2s; }
footer a:hover { opacity: 0.8 }
footer .logo_small { width: 8rem; margin-top: 5px }

.infopanel { position: fixed; top: 1em; left: 1em; padding: 5px; width: 12em; background: #000; color: #fff; font-size: 10px; line-height: 1.25em; opacity: 0.7; overflow: hidden; border-radius: 5px; }

.infomail_form {	animation: anim1; animation-duration: 0.25s; animation-fill-mode: forwards; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white_transparent); line-height: 1.25em; overflow: hidden; text-align: center; }
.infomail_form form { position: absolute; left: 50%; top: 40%; transform: translate3d(-50%, -50%, 0px); background: var(--blue); color: var(--white); padding: 3rem; }
.infomail_form .text { margin: 0 0 3rem 0; line-height: 1.12em; }
.infomail_form .text_form { background: var(--gray1); width: 100%; max-width: 30rem; padding: 5px 8px; border: 0; border-radius: 3px; margin: 1rem 0.5rem; }
.infomail_form .button { background: none; border: none; color: #fff; padding: 0 0.5rem; }
.infomail_form .button:hover { opacity: 0.85 }
.infomail_form .tos_newsletter { max-width: 30em;  line-height: 1.5em; margin: 2rem auto; font-size: 0.8em; font-weight: 200 }
.infomail_form .tos_newsletter a { text-decoration: underline; text-decoration-style: dotted; }
.infomail_form .text_form { background: var(--gray1); width: 100%; max-width: 30rem; padding: 5px 8px; border: 0; border-radius: 3px; margin: 1rem 0.5rem; }
.infomail_form .close { position: fixed; top: 2rem; right: 2.5rem; width: 3rem; cursor: pointer; transition: opacity 0.2s }
.infomail_form .close:hover { opacity: 0.65; }

.infomail_internal_form { margin-bottom: 10rem; }
.infomail_internal_form form { margin: 1rem 0; display: flex; align-items: center; flex-wrap: wrap; }
.infomail_internal_form .text_form { background: var(--gray1); width: 45%; padding: 0.65rem; border: 0; border-radius: 3px; margin: 1rem 0.5rem 1rem 0; min-width: 10em; }
.infomail_internal_form .small { font-size: 0.8em; line-height: 1.5em; }
.infomail_internal_form .button { margin-top: 1rem; }


/* FLEX */

@media screen and (max-width: 1900px) 
	{
	html { font-size: 14px; }
	}

@media screen and (max-width: 1500px) 
	{
	.selected_content .grid, .news .grid { gap: 2.5rem; }
	.suggestions { width: 39%; }
	}

@media screen and (max-width: 1200px) 
	{
	html { font-size: 1.175vw; transition: font-size 0s; }
	.collapse1 { display: none; }
	.news .grid { grid-template-columns: repeat(3, 1fr); }
	.news .grid.previews .item:nth-last-child(-n+1) { display: none; }
	}

@media screen and (max-width: 980px) 
	{
	html { font-size: 11.5px; }
	.collapse2 { display: none; }

	header .container { grid-template-columns: 20rem auto 6rem; gap: 0 2rem; }
	header .logo  { grid-row: 1/1; grid-column: 1/1; }
	header .searchform { grid-row: 1/1; grid-column: 2/2; }
	header .cart_section { grid-row: 1/1; grid-column: 3/3; }
	header .menu { grid-row: 2/2; grid-column: 1/4; }
	header .menu  { margin-top: 1.5rem; }
	header .menu ul { justify-content: left; }
	header .searchform { align-items: center; padding: 0 1rem; ,margin-top: 3.38rem; }
	header .searchform input { width: -webkit-fill-available; }

	.suggestions { width: 40%; align-self: baseline; margin-top: 3.28rem; }

	.cart_table tbody.two_columns { grid-template-columns: 100% }

	.catalogue nav.vertical { width: 100%; background: var(--gray1); padding: 2rem; }
	.catalogue nav.catalogue_filters { margin-top: 2rem }
	.catalogue .container.flex { flex-wrap: wrap; }
	.catalogue nav.vertical { width: 100%; column-count: 3; column-gap: 2.3rem; margin-bottom: 2rem; }

	.button2 { padding: 0 0.7rem 0rem 0.7rem; }
	.selected_content .grid, .news .grid { gap: 2rem; }

	.book .version { width: 100% }
	.catalogue .vertical { display: none; }
	#catalogue_filter { display: inline-flex; margin-left: 0.5rem}

	.selected_content .grid, .news .grid { grid-template-columns: repeat(4, 1fr); width: 100%; }
	.selected_content.compound .grid { grid-template-columns: repeat(4, 1fr); width: 100%; }
	.selected_content.small_preview .grid { grid-template-columns: repeat(4, 1fr); width: 100%; gap: 0 2.5rem }
	.selected_content.small_preview .grid .item:nth-last-child(-n+2) { display: none; }

	.selected_content:not(.compound) .grid .item:last-child { display: none; }
	.selected_content.compound .item .meta { display: none !important;  }
	.selected_content .item.large img { min-width: 100%; }

	.selected_content.news .grid .item:nth-last-child(-n+10) { display: block; }
	.catalogue .selected_content .grid .item:nth-last-child(-n+10) { display: block; }

	.book .container { gap: 4rem; margin-bottom: 0rem }
	.book .left_section { width: 30%; min-width: inherit; } 
	.book .item_tags { width: 100%; }

	.news_list nav { width: 15rem; min-width: inherit; }

	.news .grid { grid-template-columns: repeat(3, 1fr); }
	.news .grid.previews .item:nth-last-child(-n+1) { display: none; }

	.tags ul { grid-template-columns: repeat(4, 1fr); gap: 0.3rem 2rem; }
	.tags ul li:nth-last-child(-n+10) { display: none; }
	footer .grid { gap: 2rem; }
	}

@media screen and (max-width: 720px) 
	{
	.collapse3 { display: none; }
	header .container { grid-template-columns: 16rem auto 6rem; gap: 0 0.5rem; }
	header .logo img { width: 15rem; }
	header nav li:not(:last-child){ margin-right: 0.75rem; padding-right: 0.75rem; }
	.suggestions { margin-top: 2.88rem; }

	section .container { padding: 4rem 4rem; }
	.book .container { display: grid; grid-template-columns: auto; gap: 0; padding-top: 1.5rem; }
	.book article { display: contents; }
	.book .cover { grid-row: 1; max-width: 320px; margin: auto; margin-bottom: 3rem; }
	.book .title { grid-row: 2; }
	.book .buy { grid-row: 3; margin-bottom: 1rem; }
	.book .description { grid-row: 4; margin-top: 1rem; }
	.book .quote { grid-row: 5; margin: 0 0 1rem 0; }
	.book .edition { grid-row: 6; margin: 0 0 0.5rem 0; }
	.book .item_tags { grid-row: 7; margin: 0 0 1rem 0; }
	.book .meta { grid-row: 8; margin: 0 0 1rem 0; }
	.book .pdf_previews { grid-row: 9; margin: 1rem 1rem 1rem 0; }

	.tags ul { grid-template-columns: repeat(3, 1fr); gap: 0.3rem 2rem; }
	.tags ul li:nth-last-child(-n+18) { display: none; }

	.page .file_download { width: 100%; }
	
	.feature_content .inner_container { flex-wrap: wrap; }
	.feature_content .cover img { width: 100%; margin: 0 auto 4rem auto; max-width: 360px; }

	.selected_content .grid { grid-template-columns: repeat(3, 1fr); }
	.selected_content .grid  { grid-template-columns: repeat(3, 1fr); }
	.selected_content .grid .item:nth-last-child(-n+2) { display: none; }
	.selected_content.compound .grid  { grid-template-columns: repeat(3, 1fr); }
	.selected_content.compound .grid .item:nth-last-child(-n+2) { display: block; }
	.selected_content.compound .grid .item:nth-last-child(-n+1) { display: none; }
	.selected_content.small_preview .grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem }
	.selected_content.small_preview .grid .item:nth-last-child(-n+3) { display: none; }
	.selected_content.small_preview .container { max-width: inherit; }
	.catalogue .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
	section.catalogue .container { max-width: none; }

	.news .grid { grid-template-columns: repeat(2, 1fr); }
	.news .grid.previews .item:nth-last-child(-n+1) { display: initial; }

	main { min-width: 540px; }
	}


/* MOBILE VERSION */

#mobile { font-size: 14.5px; }

#mobile .font_heading1 { font-size: 3.5rem; }
#mobile .font_heading2 { font-size: 2.5rem; }
#mobile .font_heading3 {  }
#mobile .font_heading4 { font-size: 3rem; }

#mobile .font1 { font-size: 1rem; }
#mobile .font2 { font-size: 1.12rem; }
#mobile .font22 { font-size: 1rem; }
#mobile .font23 { font-size: 2rem; }
#mobile .font3 { font-size: 1rem; }
#mobile .font4 { font-size: 0.95rem; }

#mobile .font3.description { line-height: 1.5em; }
#mobile .page { line-height:  1.5em; }

#mobile .nomobile { display: none !important; }
#mobile main { min-width: 0; }

#mobile nav.menu { display: none; }
#mobile section .container { padding: 2rem; }
#mobile header .container { padding: 2rem; margin: 0; gap: 2rem 0; justify-items: stretch; align-items: center; grid-template-columns: auto auto auto; }
#mobile header .logo { grid-row: 1/1; grid-column: 1/1; }
#mobile header .cart_section { grid-row: 1/1; grid-column: 2/2; }
#mobile header .menu_button { grid-row: 1/1; grid-column: 3/3; }
#mobile header .searchform { grid-row: 2/2; grid-column: 1/4; padding: 0; }
#mobile header .menu_button { display: block;  height: 2.6rem; cursor: pointer; justify-self: flex-end;}
#mobile header .logo img { width: auto; height: 3rem }
#mobile header .menu { margin: 0; }
#mobile header nav { width: 100%; height:  100vh; background: var(--black); position: fixed; left: 0; top: 0rem; white-space: wrap; z-index: 50; }
#mobile header nav ul { flex-wrap: wrap; font-size: 1.5rem; font-weight: 700;  text-align: center; color: var(--white); top: 8rem; position: absolute; }
#mobile header nav li { width: 100%; border: 0; margin: 1rem 0; padding: 0 !important }
#mobile header .social img { filter: invert(1); height: 2rem; opacity: 1; margin-top: 2rem; }
#mobile header .menu_close { display: none; position: fixed; top: 2rem; right: 1.8rem; width: 3rem; cursor: pointer; filter: invert(1); z-index: 50; transition: opacity 0.2s }
#mobile header .menu_close:hover { opacity: 0.65 }
#mobile header .cart img { width: 2.125rem; }
#mobile header .cart_count { width: 1.8rem; height: 1.8rem; }
#mobile .suggestions { width: 90%; margin-top: 2.28rem; max-height: 12.6rem; }

#mobile .feature_content .inner_container { gap: 0 2rem }
#mobile .feature_content .cover img { max-width: 65%; margin: 0.5rem auto 2.75rem auto; }
#mobile section .container.background { background-size: auto 100%; }

#mobile .selected_content .grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
#mobile .selected_content .grid .item:nth-last-child(-n+1) { display: initial; }
#mobile .news_list .selected_content .grid { grid-template-columns: 100%; }

#mobile .tags ul {  grid-template-columns: repeat(2, 1fr); font-size: 1rem; gap: 0 2rem; }

#mobile .book .description { padding: 1rem; }
#mobile .book .quote { padding: 2rem; }
#mobile .book .buy { margin: 2rem 0 2rem 0; }

#mobile .pdf_preview iframe { width: 96%; height: 80vh; } 
#mobile .pdf_preview .close { top: 2rem; left: 50%; transform:translateX(-50%); }

#mobile .infomail_form form { width: 90%; }

#mobile nav.vertical { line-height: 1.2em; }
#mobile nav.vertical li { margin-bottom: 0.5em; }
#mobile nav.horizontal { display: block }
#mobile nav.horizontal form { display: inline-block; margin: 0 0.75rem 0.75rem 0; }
#mobile nav.horizontal #catalogue_filter { margin-left: 0 }
#mobile .catalogue nav.catalogue_filters { margin-top: 0.3rem }
#mobile .catalogue nav.vertical  { column-count: 2; column-gap: 1.25rem; padding:  1.5rem}
#mobile .catalogue select { width: 12rem; }

#mobile .container.news_list { flex-wrap: wrap; }
#mobile .news_list nav { margin-bottom: 1rem; text-decoration: none !important; }
#mobile .news_list nav li { display: inline-block; margin: 0; padding: 0; }
#mobile .news_list nav li a { display: inline-block; background: var(--gray2); color: var(--white); padding: 0.2rem 0.75rem; margin: 0 4px 4px 0; border-radius: 3px; text-decoration: none !important; }
#mobile .news_list nav { width: 100%; }
#mobile .news_list nav .selected { text-decoration: none !important; background: var(--blue); }

#mobile .page .gallery_item { text-align: center; }
#mobile .page .gallery_item figure { width: 100%; margin: 0 auto 1em auto }
#mobile .page .gallery_item figure img { margin: 0 auto 1em auto }

#mobile .page figure img { min-height: initial; }

#mobile .infomail_internal_form .text_form { width: 100%; }

#mobile .cart_table, #mobile .order_preview_table { font-size: 0.75rem }
#mobile .cart_table td { padding: 0.55rem; }
#mobile #delivery .cart_table td { display: flex; }
#mobile .check_out_form .form_inline_message { padding-left: 0 }
#mobile .cart_table .cart_button img { height: 1.125rem; }
#mobile .pay_logo { max-width: 100%; }
#mobile #pay_now { margin-bottom: 1rem }
#mobile .check_out_form .radiocontainer { padding-left: 1.5rem; }
#mobile .check_out_form .radiocontainer .checkmark { width: 1rem; height: 1rem }

#mobile footer .container { padding: 2rem; }
#mobile footer .container .item { width: 50% }
#mobile footer .container .item:nth-last-child(-n+4) { display: none; }
#mobile footer .container .item:first-child img { width: 50% }

#mobile .cookiebar { text-align: center; }
#mobile .cookiebar .container div { display: flex; justify-content: center; }

@media screen and (max-width: 380px) 
	{
	#mobile header .logo img { height: 2.5rem !important; }
	#mobile .selected_content .grid, .news .grid { grid-template-columns: repeat(1, 1fr); text-align: center; }
	#mobile .selected_content .item { margin-: 1rem 0; }
	#mobile .selected_content img { width: 14rem; margin: 0 auto; margin-bottom: 1.5rem; display: block; } 
	#mobile .selected_content .item.large img { min-width: 14rem !important; }
	#mobile .navigation_bar { text-align: center; width: 65% }
	#mobile .tags ul { grid-template-columns: repeat(1, 1fr); text-align: center; }
	}

/* end of mobile */

/* SAFARI WEBKIT  */

.apple_device .selected_content .grid { align-items: start; }
.apple_device .feature_content .cover img { height: intrinsic; }