/*
	Theme Name:   ND Hobbies 2023
	Theme URI:    http://ndhobbies.com/
	Description:  ND Hobbies Website
	Author:       Xacur
	Author URI:   http://xacur.com/
	Version:      1.0.22
	Text Domain:  ndh
*/

/*******************************************************************************
	*	CSS Reset
*******************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap&family=Ovo');
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}
/************************************************************************************************
	//	Variables
************************************************************************************************/
:root{
	--main-color: #f47e20;
	--main-color-light: #f8a869;
	--main-color-transparent: #f47e2055;
	--second-color: #be5a09;
	--second-color-dark: #723605;
	--second-color-transparent: #be5a0955;
	--third-color: #f6b26b;
	--accent-color: #4682b4;
	--accent-color-transparent: #4682b422;
	--blog-color: #9370d8;
	--error-color: #a52a2a;
	--error-color-transparent: #a52a2a55;
	--library-background-color: #333B54;
	--library-background-color: #2a323c;
	--library-card-background-color: #323c48;
	--library-card-background-color-transparent: #323c48CC;
	--library-card-text-color: #98a4b9;
	--library-card-text-active-color: white;
	--text-font: 'Fira Sans', sans-serif;
	--title-font: 'Fira Sans', sans-serif;
	--serif-font: "Ovo", serif;
}

/*******************************************************************************
	*	CSS General
*******************************************************************************/
html, body {
	height: 100%;
	display: flex;
	flex-direction: column;
	scroll-behavior: smooth !important;
}

img{
	max-width: 100%;
	height: auto;
}
.container{
	width: 100%;
	max-width: 1400px;
	padding: 0 20px;
	margin: 0 auto;
}

.single-post .container{
	max-width: 900px;
	font-size: 1.2em;
	line-height: 1.4em;
}

.page-wrapper {
	flex: 1;
}
img.aligncenter{
	margin-left: auto;
	margin-right: auto;
	display: block;
}
label{
	font-size: 14px;
	color: gray;
}

input[type=submit]{
	cursor: pointer;
}
button{
	cursor: pointer;
}

textarea:focus, input:focus{
	outline: none;
}
pre{
	border: 2px solid lightgray;
	max-height: 60vh;
	overflow: scroll;
	padding: 10px;
	display: block;
	font-family: monospace;
	font-size: 14px;
	line-height: 16px;
	white-space: pre;
	margin: 1em 0;
}
textarea{
	width: 100%;
	padding: 1em;
	height: 200px;
}

/*******************************************************************************
	*	Text Style
*******************************************************************************/
body{
	font-family: var(--text-font);
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
	overflow-y: scroll;
	overflow-x: hidden;
	background-image: url(img/bg2.jpg);
}

body.not-found{
	background-image: url(https://i.imgur.com/wi1hoiTh.jpg);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: auto 50%;
	background-attachment: fixed;
}

small{
	font-size: .8em;
}
p{
	margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6,
.woocommerce-thankyou-order-received{
	font-family: var(--title-font);
	font-weight: normal;
	margin: .5em 0 .2em;
	line-height: 1.3em;
	position: relative;
}

.ndh_library h1 span, 
.ndh_library h2 span, 
.ndh_library h3 span, 
.ndh_library h4 span, 
.ndh_library h5 span, 
.ndh_library h6 span{
	position: absolute;
	top: -80px;
}

b,strong{
	font-weight: bold;
}
i,em{
	font-style: italic;
}
a, a:visited, a:active, a:focus{
	color: var(--accent-color);
	text-decoration: none;
}

h1{
	font-size: 3em;
}

h2,
.woocommerce-thankyou-order-received{
	font-size: 2.5em;
}
h3{
	font-size: 2em;
}
h4{
	font-size: 1.5em;
}
h5{
	font-size: 1.2em;
}
h2 a{
	text-decoration: none;
}
blockquote{
	margin-left: 10px;
	padding-left: 10px;
	color: #666;
	border-left: 3px solid skyblue;
}
.center{
	text-align: center;
}

/*******************************************************************************
	*	TOP BAR
*******************************************************************************/
.top-bar{
	width: 100%;
	background-color: #121212;
	border-bottom: 1px solid var(--main-color);
}
.top-bar .container{
	display: flex;
	justify-items: stretch;
	align-items: center;
	flex-wrap: no-wrap;
	padding-top: 5px;
	padding-bottom: 5px;
}
.top-bar .logo{
	flex-basis: 50%;
	padding: .5em;
}
.top-bar .search{
	flex-basis: 50%;
}
.top-bar .search input{
	height: 50px;
	border: none;
	color: white;
	box-sizing: border-box;
	background-color: #121212;
	border-left: 2px solid #FFFFFF55;
	width: 100%;
}
.top-bar .search input:active,
.top-bar .search input:focus{
	border-left: 2px solid #FFFFFF;
	background-color: #62626222;
}
.top-bar .top-menu{
	flex-basis: 20%;
}

.top-menu ul li{
	display: inline-block;
	margin-left: 1em;
}
.top-menu ul li a{
	border: 2px solid gray;
	font-weight: bold;
	display: block;
	padding: 5px;
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}


/*******************************************************************************
	*	MAIN MENU
*******************************************************************************/
.main-menu{
	width: 100%;
	background-color: #222;
	box-shadow: 0 10px 5px rgba(0, 0, 0, .3);
	margin-bottom: 30px;
	z-index: 100;
}
.main-menu .container{
	text-align: left;
}
.main-menu .container > ul{
	text-align: center;
}
.main-menu .container > ul > li{
	display: inline-block;
	position: relative;
}
.main-menu .container > ul > li > ul{
	display: block;
	background-color: #222222FF;
	box-shadow: 0 10px 5px rgba(0, 0, 0, .3);
	position: absolute;
	top: 70%;
	width: 300px;
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: top .2s, opacity .5s;
	z-index: -200;
}
.main-menu .container > ul > li > ul > li a{
	display: block;
	width: 100%;
	border-bottom: 1px solid #111111FF;
	border-top: 2px solid #333333FF;
}
.main-menu .container > ul > li.active{
	background-color: rgba(200, 100, 190, .4);
}
.main-menu .container ul li a{
	display: inline-flex;
	padding: 5px 20px;
	justify-items: center;
	align-items: center;
	column-gap: 5px;
	color: white;
	text-decoration: none;
	transition: background .5s;
}
.main-menu .container ul li a:hover{
	background-color: rgba(200, 100, 190, .2);
}
.main-menu .container ul li a img{
	width: 40px;
	height: 40px;
}
/*******************************************************************************
	*	MAIN MENU Working
*******************************************************************************/
.main-menu .container > ul > li:hover > ul{
	top: 100%;
	z-index: 100;
	height: auto;
	opacity: 1;
}



/*******************************************************************************
	*	MAIN CONTENT
*******************************************************************************/
.main .container h2{
	padding: 5px;
}


.main .container article{
	width: 96%;
	margin: 0 auto;
}
.single .main .container .post-body{
	border-left: 5px solid var(--second-color);
	background-color: white;
	padding: 25px;
	min-height: 20vh;
	border-radius: 0 0 2em 0;
}

.single .main.with-related{
	padding: 1em;
	display: flex;
}
.single .main.with-related > article{
	flex-grow: 1;
}

.single .main .post-body h1, 
.single .main .post-body h2,
.single .main .post-body h3,
.single .main .post-body h4,
.single .main .post-body h5,
.single .main .post-body h6{
	color: var(--second-color);
}

.main .post-body .post-meta{
	padding: 0em 1em;
	margin-bottom: 1em;
}

.main .post-body h1{
	text-align: center;
}

.main .post-body table{
	border-left: 5px solid var(--third-color);
	font-size: .9em;
	margin-bottom: 1em;
}
.main .post-body table td{
	background-color: #4682b411;
	padding: .3em .5em;
}
.main .post-body table td:nth-child(odd){
	background-color: #4682b422;
}
.main .post-body table tr:nth-child(odd){
	background-color: #4682b411;
}
.main .post-body table th,
.main .post-body table tfoot td{
	font-weight: bold;
	padding: .5em 1em;
	vertical-align: middle;
	border-bottom: 2px solid var(--third-color);
	font-size: 12px;
}

.main .post-body table tfoot tr:first-child td,
.main .post-body table tfoot tr:first-child th{
	border-top: 1px solid var(--third-color);
	background-color: white;
}

.post-body ul,
.post-body ol{
	padding-left: 1em;
}

.post-body ul li,
.post-body ol li{
	margin: .5em 0;
}
.post-body ul li{
	list-style: inside disc;
}

.post-body ol{
	padding-left: 2em;
}
.post-body ol li{
	list-style: outside decimal;
}
.post-body ol.commentlist li{
	list-style: none;
}

.class-table{
	width: 100%;
}

.main .post-body .class-table thead tr th{
	padding: .5em 0;
	line-height: 1.3em;
}


.main .container .post-body blockquote{
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	border-left: 0;
	background-color: #b0c4de66;
	padding: 1.2em 2em;
	box-shadow: 0 0 15px #555;
	position: relative;
	margin: 2em;
	font-size: 1em;
	line-height: 1.4em;
	font-family: var(--serif-font);
}
.main .container .post-body blockquote:before{
	content: '';
	position: absolute;
	top: calc( 100% + 3px );
	right: 0px;
	border-top: 0px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 30px solid black;
}
.main .container .post-body blockquote:after{
	content: '';
	position: absolute;
	top: calc( 100% + 3px );
	left: 0px;
	border-top: 0px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 30px solid black;
}
.main .container .post-body blockquote > *:first-child:before{
	content: '';
	position: absolute;
	bottom: calc( 100% + 3px );
	left: 0px;
	border-top: 15px solid transparent;
	border-right: 30px solid black;
}
.main .container .post-body blockquote > *:first-child:after{
	content: '';
	position: absolute;
	bottom: calc( 100% + 3px );
	right: 0px;
	border-top: 15px solid transparent;
	border-left: 30px solid black;
}

.main .container .post-body blockquote > h3:first-child{
	margin-top: 0;
	font-size: 1.3em;
}

.main .post-body table tr:hover{
	background-color: #4682B422;
}



/************************************************************************************************
	//	Post body columns
************************************************************************************************/
.post-body-columns{
	border-top: 2px solid var(--third-color);
}

.post-body-columns .post-body-sidebar{
	width: 30%;
	border-right: 2px solid var(--third-color);
	padding: 1em;
	float: left;
}
.post-body-columns .post-body-body{
	width: 70%;
	padding: 1em;
	float: left;
}

/************************************************************************************************
	//	BLOG ARCHIVE
************************************************************************************************/
.archive .main-content h1.archive-title,
h1.title-404{
	border-bottom: 3px solid var(--main-color);
	margin-bottom: .5em;
	font-size: 2em;
	padding-bottom: .5em;
}
.archive .container.articles{
	display: flex;
	column-gap: 1em;
	row-gap: 1em;
	flex-wrap: wrap;
}
.archive .container.articles article{
	flex-basis: 300px;
	flex-grow: 1;
}
.archive article{
	padding: 10px;
	margin: 0 0 0px 0;
}

.archive article h2{
	margin-top: 0;
}


/************************************************************************************************
	//	Columns
************************************************************************************************/
.columns-container{
	display: flex;
	flex-wrap: wrap;
	max-width: 1400px;
	width: 98%;
	margin: 0 auto;
}
main.main{
	transition: height 5s;
	flex-basis: calc( 599px - 250px );
	width: 600px;
	flex-grow: 1;
	padding: 1em;
	max-width: 100%;
}
.single.product main.main{
	flex-basis: calc( 599px - 500px );
}

.single.product .related-products-wrapper{
	flex-basis: 200px;
	padding-left: .5em;
	border-left: 2px solid var(--main-color);
	position: static;
	float: none;
}
.single.product .related-products-wrapper h2{
	font-size: 1.2em;
}
.single.product .related-products-wrapper .woocommerce-LoopProduct-link img{
	background-color: transparent;
	width: 100%;
}

.single.product .related-products-wrapper li.product{
	margin-bottom: 1em;
	background-color: #FFFFFF66;
	padding: .5em;
	border: 2px solid var(--third-color);
}

.single.product .related-products-wrapper .related.products{
	position: sticky;
	font-size: .8em;
	top: 40px;
	float: none;
	display: block;
	align-self: flex-start;
}


/*******************************************************************************
	*	SIDEBAR
*******************************************************************************/
aside.store-sidebar-container{
	border-right: 5px solid var(--third-color);
	width: 250px;
	min-height: 20vh;
	position: static;
	float: none;
}

.store-sidebar{
	position: sticky;
	line-height: 1.5em;
	top: 40px;
	width: 100%;
	float: none;
	text-align: right;
	padding: 0px 0 25px 25px;
	display: block;
	align-self: flex-start;
}

.store-sidebar .product-sku{
	padding: 1em;
	font-size: 1.2em;
}
.store-sidebar .product-sku strong{
	color: var(--second-color);
}

.store-sidebar h2,
.store-sidebar h3{
	font-size: 1.5em;
	color: var(--second-color);
	padding: 0px 20px 10px 10px;
	border-bottom: 2px solid;
}
.store-sidebar h3{
	margin-top: 0;
}

.store-sidebar ul ul{
	font-weight: normal;
}
.store-sidebar ul li a{
	color: black;
	text-decoration: none;
	display: block;
	padding: .5em 20px .5em 10px;
	transition: .2s all;
	border-right: 0px solid var(--main-color);
}
.store-sidebar ul li a:hover{
	border-right: 20px solid var(--second-color);
}

.store-sidebar ul li a.active.bottom{
	background-color: #4682b422;
	color: black;
	font-weight: bold;
	border-right: 20px solid var(--third-color);
}
.store-sidebar ul li.active.bottom{
	position: relative;
}


.products-columns-2 .woocommerce ul.products li.product{
	width: 30%;
	margin: 30px 0% 30px 15%;
}


/*
.single.ndh_library.page .store-sidebar ul.sections{
	display: none;
}
.single.ndh_library.page .store-sidebar li.active > ul.sections{
	display: block;
}
*/
ul.sections{
	font-size: .9em;
}

ul.sections .active{
	background-color: var(--accent-color-transparent);
}
ul.sections > .active > a{
	border-bottom: 1px solid var(--accent-color);
}

ul.chapters .active{
	background-color: var(--accent-color-transparent);
}

ul.sections ul.chapters{
	display: none;
}
ul.sections .active ul.chapters{
	display: block;
}

.store-sidebar > ul > li > a{
	font-size: 1.2em;
	color: var(--third-color);
	border-bottom: 1px solid var(--third-color);
}
.store-sidebar > ul > li > ul > li > a{
	font-size: .9em;
	font-family: var(--title-font);
}
.store-sidebar > ul > li > ul > li > ul > li > a{
	font-family: var(--title-font);
}
.store-sidebar > ul > li > ul > li > ul > li > ul > li > a{
	font-style: italic;
	color: #888;
}


/*******************************************************************************
	*	POST CONTENT FORMAT
*******************************************************************************/

.img-gallery.aligncenter{
	display: block;
	width: 100%;
	background-color: white;
/*	border-bottom: 2px solid var(--third-color);*/
}

.img-gallery img{
	padding: 5px;
	margin: 10px;
}
.img-gallery.aligncenter{
	text-align: center;
}
.img-gallery img.img-large{
	margin: 10px 0;
}

.img-gallery .img-medium,
.img-m-left,
.img-m-right{
	width: calc( 50% - 15px );
}
.img-gallery .img-small{
	width: calc( 33.33% - 15px );
}
.img-gallery a:first-child .img-medium,
.img-gallery a:first-child .img-small{
	margin-left: 0;
}
.img-gallery a:last-child .img-medium,
.img-gallery a:last-child .img-small{
	margin-right: 0;
}


.main .container article .post-body{

}
.input-text{
	border: 1px solid #d3ced2;
	border-radius: 0px;
	padding: 10px;
}

img.alignright,
.img-gallery a:last-child .img-medium.alignright,
.img-gallery a:last-child .img-small.alignright{
	float: right;
	margin-left: 1em;
}
img.alignleft,
.img-gallery a:last-child .img-medium.alignleft,
.img-gallery a:last-child .img-small.alignleft{
	float: left;
	margin-right: 1em;
}

/*******************************************************************************
	*	BLOG IMAGES
*******************************************************************************/
.post-body img{
	border: 2px solid steelblue;
	padding: 5px;
}
.post-body img.img-large{
	display: block;
	margin: 1em auto;
}
.post-body img.img-medium{
	max-width: 50%;
	margin-right: 0;
	margin-left: 1em;
}


/*******************************************************************************
	*	RELATED CONTENT
*******************************************************************************/
.single.product .post-body .related-products h2{
	padding-bottom: 10px;
	margin-bottom: 30px;
}

.single.product .single-product-gallery{
	display: flex;
	padding: 1em;
	column-gap: 1em;
	row-gap: 1em;
	flex-wrap: wrap;
	text-align: center;
}
.single.product .single-product-gallery a{
	display: flex;
	width: 200px;
	flex-basis: 200px;
	flex-grow: 1;
}
.single.product .single-product-gallery img{
	display: block;
	flex-basis: 200px;
	width: 200px;
	padding: 1em;
	flex-grow: 1;
	object-fit: contain;
	border: 2px solid goldenrod;
}

.single.product .add-to-cart,
.single.product .product-description{
	margin-top: 4em;
}

.related-products ul.products.columns-4{
	display: flex;
	flex-direction: column;
	column-gap: 2em;
}

.related-products ul.products.columns-4 li{
	display: block;
	width: 200px;
}
.related-products ul.products.columns-4 li img{
	width: 200px;
	height: 200px;
}

.related-products ul.products.columns-4 h2.woocommerce-loop-product__title{
	margin-bottom: 0;
}




/*******************************************************************************
	*	hero-header
*******************************************************************************/
.hero-header{
	margin-top: -30px;
	margin-bottom: 30px;
	border-top: 1px solid var(--main-color);
	color: white;
	background-size: cover;
	box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
	position: relative;
	background-color: #00000022;
	padding: 2em;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 15vh;
}
.single.post .hero-header{
	align-items: flex-end;
}

.hero-header .container{
	text-align: center;
	padding: 0 5em;
}

.hero-header h1{
	margin: 20px auto;
	text-shadow: 2px 2px 5px #000, 2px 2px 15px #000;
	color: ghostwhite;
}


.hero-bg{
	top: 0;
	left: 0;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-size: cover;
	background-position: center;
}

/*******************************************************************************
	*	Home Page
*******************************************************************************/
.single.home.page .hero-header{
	padding: 30px 0;
	border-bottom: 50px solid #222;
}
.home-featured-wrapper{
	padding: 50px 0;
	position: relative;
}
.home-featured{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	column-gap: 3em;
	min-height: 30vh;
	position: relative;
}

.home-featured-wrapper:nth-child(odd) .home-featured{
	flex-direction: row-reverse;
}

.home-featured .featured-visual,
.home-featured .featured-text{
	flex-basis: 45%;
	text-align: left;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hero-header .home-featured .featured-visual,
.hero-header .home-featured .featured-text{
	text-shadow: 2px 2px 12px #000000AA;
}

.home-featured-wrapper .home-featured .featured-visual,
.home-featured-wrapper .home-featured .featured-text{
	color: white;
	text-shadow: 2px 2px 12px #000000AA, 5px 5px 5px #000000, 2px 2px 0px #000000, -1px -1px 0px #000000;
}

.home-featured .featured-text p{
	width: 100%;
}

.home-featured .featured-text p .button,
.woocommerce-MyAccount-downloads-file.button.alt{
	background-color: var(--main-color-light);
	border-bottom: 3px solid rgba(255, 255, 255, .6);
}

.woocommerce-MyAccount-downloads-file.button.alt{
	line-height: 1.5em;
}

.home-featured .featured-text p .button::after,
.read-all-posts a:after{
	content: '»';
	font-size: 1.2em;
	margin-left: .5em;
	transition: all .5s;
}

.home-featured .featured-text p .button:hover,
.read-all-posts a:hover,
.woocommerce-MyAccount-downloads-file.button.alt:hover{
	background-color: rgba(138, 43, 226, .5);
	transform: translateX(10px);
}

.home-featured-wrapper .hero-bg{
	background-attachment: revert-layer;
}

.home-featured .featured-visual{
	transform: rotate(-5deg);
	transition: all .5s;
}
.home-featured .featured-visual:hover{
	transform: rotate(0deg);
}


.twin-featured.container.articles,
.triplets-featured.container.articles{
	padding: 1em;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
}
.container.articles article.post-body{
	flex-basis: 400px;
	flex-grow: 1;
}

.read-all-posts{
	width: 96%;
	max-width: 400px;
	margin: 1em auto;
	padding-bottom: 3em;
}

.woocommerce-Address{
	display: block;
}

/************************************************************************************************
	//	TEMP My account
************************************************************************************************/
.woocommerce-MyAccount-navigation ul{
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	column-gap: 2em;
	margin-bottom: 2em;
	flex-wrap: wrap;
}

.woocommerce-MyAccount-navigation ul li{
	list-style: none;
	flex: 1;
	display: inline-block;
}
.woocommerce-MyAccount-navigation ul li a{
	border-bottom: 5px solid var(--second-color);
	padding: 1em;
	width: 100%;
	display: block;
	text-align: center;
	transition: all .5s;
	white-space: nowrap;
}
.download-remaining{
	text-align: center;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover{
	background-color: #4682b411;
	border-color: var(--main-color);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wt-smart-coupon{
	display: none;
}

.woocommerce-MyAccount-content form{
	max-width: 600px;
	margin: 0 auto;
}

.col2-set{
	display: flex;
	justify-content: space-between;
}
.col2-set > div{
	width: 45%;
}

body.my-account .hero-header{
	display: none;
}

.lost_reset_password{
	margin: 0 auto;
	width: 600px;
	max-width: 100%;
	min-width: 350px;
}
.lost_reset_password input[type=text]{
	width: 100%;
}

/*******************************************************************************
	*	Elements
*******************************************************************************/
.video-wrapper{
	width: 100%;
	height: 0;
	padding-bottom: 56%;
	position: relative;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .7);
	border: 2px solid white;
}

.video-wrapper iframe{
	position: absolute;
	width: 100%;
	height: 100%;
}

/*******************************************************************************
	*	STORE
*******************************************************************************/
.store-icon{
	width: 50px;
	float: left;
	margin-right: 20px;
}

.single.product .post-body h2,
.single.page.shop .post-body h2,
.single.product .post-body h3,
.single.page.shop .post-body h3{
	margin-top: 0;
	padding: 10px;
	padding-bottom: 5px;
}

.single .woocommerce ul.products li.product .woocommerce-loop-category__title, 
.single .woocommerce ul.products li.product .woocommerce-loop-product__title, 
.single .woocommerce ul.products li.product h3{
	color: #222;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.5em;
	height: 75px;
	border-color: #444;
	border-width: 5px;
	overflow: hidden;
}

.single .woocommerce ul.products li.product:hover .woocommerce-loop-product__title{
	border-bottom-color: var(--second-color);
}

.single.page.shop .post-body .woocommerce.columns-4,
.single.product .post-body .woocommerce.columns-4{
	padding: 50px 0;
}

.product.woocommerce.add_to_cart_inline{
	display: block;
	max-width: 400px;
	margin: 20px auto;
	text-align: center;
}
.product.woocommerce.add_to_cart_inline .button{
	padding-bottom: 1em;
	padding-top: 1em;
}
.woocommerce ul.products li.product .price{
	text-align: left;
}
.woocommerce-Price-amount.amount{
	display: inline-block;
	text-align: center;
	width: 45%;
	padding: 10px;
}
.add_to_cart_inline del span{
	text-decoration: line-through;
}
.add_to_cart_inline{
	font-size: 1.2em;
}

.woocommerce-notices-wrapper{
	display: none;
}

.button,
.product.woocommerce.add_to_cart_inline .button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_grouped,
.commentlist li .reply a.comment-reply-link,
.form-submit .submit,
body a.woocommerce-MyAccount-downloads-file.button.alt,
input[type=submit]{
	text-align: center;
	background-color: var(--main-color);
	color: white;
	width: 100%;
	display: block;
	transition: all .2s;
	font-size: .9em;
	border: 0;
	cursor: pointer;
}

.button.in-cart,
.product.woocommerce.add_to_cart_inline .button.in-cart{
	background-color: var(--main-color-transparent);
}


.cart-empty.woocommerce-info{
	font-size: 1.5em;
	padding: 1em;
}

body .button{
	padding: .3em;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
}

body .button:hover,
body a.woocommerce-MyAccount-downloads-file.button.alt{
	background-color: var(--main-color-light);
}

.single.product .hero-header,
.single.post .hero-header{
	min-height: 30vh;
	background-position: center;
}

.badge-button.button{
	width: auto;
	display: inline-block;
	text-transform: none;
	background-color: var(--second-color);
	font-size: 12px;
}


.single-product main.main{
	background-color: white;
}

.feature-box{
	margin: 1em;
	background-color: rgba(255, 255, 255, .4);
	border: 1px solid var(--main-color-light);
	border-top-width: 5px;
}

.feature-box .feature-name{
	margin: 0 1em 1em;
	padding: 1em;
	font-weight: bold;
	border-bottom: 2px solid var(--main-color-light);
}
.feature-box .feature-description{
	margin: 1em;
	padding: 1em;
	font-size: .95em;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5em;
	padding-bottom: 2em;
}


/************************************************************************************************
	//	STORE ERROR
************************************************************************************************/
ul.woocommerce-error li{
	list-style: none;
	display: block;
	padding: .5em 1em;
	border: 1px solid var(--error-color);
	border-left-width: 5px;
	background-color: var(--error-color-transparent);
}
ul.woocommerce-error li:before{
	content: "\f06a";
	font-family: FontAwesome;
	font-size: 2em;
	color: var(--error-color);
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
}



.woocommerce-message{
	display: block;
	padding: 0.5em 1em;
	border: 1px solid var(--main-color);
	border-left-width: 5px;
	background-color: var(--main-color-transparent);
}

.woocommerce-message:before{
	content: "\f05a";
	font-family: FontAwesome;
	font-size: 2em;
	color: var(--main-color);
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
}


.button.wc-forward{
	width: auto;
	font-size: 1em;
	padding: .5em;
}

.button.wc-forward:after{
	content: "\f07a";
	color: white;
	margin-left: 1em;
	font-family: FontAwesome;
}


/************************************************************************************************
	//	CART
************************************************************************************************/
body.woocommerce-page ul.woocommerce-thankyou-order-details{
	border: 2px solid #00000022;
	padding: 1em;
	margin-bottom: 0;
	display: flex;
}

body.woocommerce-page ul.woocommerce-thankyou-order-details li{
	text-align: center;
}

body.woocommerce-page ul.woocommerce-thankyou-order-details li strong{
	margin-top: 1em;
}

.calculated_shipping h2{
	margin-top: 2em;
}
.calculated_shipping form{
	margin-top: -2em;
}


/************************************************************************************************
	//	CHECK OUT
************************************************************************************************/
body.checkout .hero-header,
body.cart .hero-header{
	display: none;
}
.woocommerce-input-wrapper input[type=text],
.woocommerce-input-wrapper input[type=tel],
.woocommerce-input-wrapper input[type=email],
.woocommerce-input-wrapper input[type=number],
.woocommerce-input-wrapper textarea,
table.shop_table.cart .actions input.input-text{
	border: 1px solid var(--third-color);
	border-radius: 0;
	padding: 1em;
	font-weight: normal;
	font-size: 14px;
}
body .select2-container--default .select2-selection--single{
	border: 1px solid var(--third-color);
	border-radius: 0;
	font-size: 14px;
	padding: 0 1em;
}

.woocommerce-form-coupon-toggle .woocommerce-info{
	margin-bottom: 0;
}
.single .main .post-body table{
	border-radius: 0;
}
table caption{
	font-weight: bold;
	font-size: 1.5em;
}


.single .main .post-body table .product-total,
tfoot td,
.product-remove,
.shop_table .product-thumbnail{
	text-align: center;
}

.woocommerce-page .woocommerce .button,
.woocommerce-page .woocommerce .button.alt{
	background-color: var(--main-color);
	padding-left: 2em;
	padding-right: 2em;
	border-radius: 0;
	margin-bottom: 5px;
}
.woocommerce-page .woocommerce .button:hover,
.woocommerce-page .woocommerce .button.alt:hover{
	background-color: var(--main-color-light);
}

.checkout.woocommerce-checkout label{
	font-size: 14px;
	color: gray;
}

ul.wc_payment_methods li{
	list-style: none;
}

.woocommerce-form-row span{
	font-size: 12px;
	color: gray;
}
.cart_totals h2{
	margin-top: 2em;
}
.cart_totals >div>form{
	margin-top: -2em;
}

/************************************************************************************************
	//	
************************************************************************************************/
.bundle-description{
	background-color: #B2BEC8;
	background: linear-gradient(135deg,  #67c1f5 0%,#417a9b 100%);
	display: flex;
	flex-direction: column;
	width: 600px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	box-shadow: 5px 5px 5px #00000044;
}
.bundle-description form.cart{
	width: auto;
	padding: 10px;
}
.single .main .post-body .bundle-description h1.product_title.entry-title{
	font-size: 1.5em;
	background-color: #098456;
	margin: 10px 10px 0 10px;
	background-color: #00000077;
	padding-top: 10px;
	color: lightblue;
}
.bundle-description .price{
	margin: 0 10px 0 10px;
	background-color: #00000077;
	color: whitesmoke;
}
.woosb-products.woosb-products-layout-list{
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 0;
	padding: 5px 10px;
	font-size: 14px;
	color: #66c0f4;
	color: aliceblue;
}
.woosb-products.woosb-products-layout-list a{
	color: #66c0f4;
	color: aliceblue;
}

.woosb-item-product.woosb-product.woosb-product-type-simple{
	flex-basis: 100%;
	flex-grow: 1;
	display: flex;
	border-bottom: 2px solid #ffffff55;
	padding: .2em 1em;
	transition: all .3s;
}
.woosb-item-product.woosb-product.woosb-product-type-simple:hover{
	background-color: #00000044;
}
.woosb-item-product.woosb-product.woosb-product-type-simple img{
	display: none;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woosb-title{
	flex-grow: 1;
	flex-basis: 600px;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woosb-price{
	flex-grow: 1;
	flex-basis: 300px;
	display: flex;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woosb-price .woosb-price-new{
	display: none;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woosb-price .woosb-price-ori{
	flex-grow: 1;
	display: flex;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woosb-price .woosb-price-ori>*{
	flex-grow: 1;
	text-align: center;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woosb-price .woosb-price-ori>del .woocommerce-Price-amount.amount,
.bundle-description .woocommerce-Price-amount.amount{
	position: relative;
}
.bundle-description del .woocommerce-Price-amount.amount:after{
	content: '';
	left: 30%;
	width: 40%;
	top: 50%;
	position: absolute;
	height: 1.5px;
	transform: rotate(-15deg);
	background-color: #ffffff;
}
.bundle-description .woosb-item-product .woocommerce-Price-amount.amount:after{
	width: 70%;
	left: 15%;
}
.bundle-description p.price{
	display: flex;
	padding: 1em;
}
.bundle-description p.price > *{
	flex-grow: 1;
}
.bundle-description p.price .woocommerce-Price-amount.amount{
	font-size: 1.5em;
	margin-top: 14px;
	width: 100%;
}
.bundle-description p.price .woocommerce-Price-amount.amount:before{
	content: "Bundle Price: ";
	position: absolute;
	font-size: 18px;
	top: -24px;
	left: 0;
	color: darkorange;
}
.bundle-description p.price del .woocommerce-Price-amount.amount:before{
	content: 'Original Price: ';
}
.woosb-wrap.woosb-bundled:before{
	content: "Content of the bundle";
	display: block;
	padding: 5px 10px 0;
	text-align: center;
	color: #00000088;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 #FFFFFF55;
	font-weight: bold;
}
.bundle-description .product_meta{
	display: none;
}
.woosb-item-product.woosb-product.woosb-product-type-simple .woocommerce-Price-amount.amount{
	padding: 0;
}
.bundle-description .woocommerce-Price-amount.amount{
	padding: 0;
}
.bundle-description button[type=submit]{
	text-align: center;
	background-color: var(--main-color);
	background-color: #00000033;
	box-shadow: 4px 4px 4px #00000077;
	color: white;
	width: 100%;
	display: block;
	transition: all .3s;
	font-size: 17px;
	padding: 17px;
	border: 0;
	cursor: pointer;
}
.bundle-description button[type=submit]:hover{
	background-color: #00000077;
}

/*******************************************************************************
	*	Archive
*******************************************************************************/
.articles .post-body{
	position: relative;
	padding: 0;
	height: 300px;
	box-shadow: 2px 2px 3px #00000055, 7px 7px 7px #00000055;
	border: 2px solid var(--main-color);
}
.articles .post-body img{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: center;
	position: absolute;
}
.articles .post-body .post-excerpt{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 1em;
	background-color: #000000AA;
}
.articles .post-body .post-excerpt h2{
	font-size: 1.1em;
}
.articles .post-body .post-excerpt a{
	color: white;
}
.articles .post-body .post-excerpt .author{
	color: white;
}

/************************************************************************************************
	//	Page Navi
************************************************************************************************/
.wp-pagenavi{
	display: block;
	width: 100%;
	padding: 2em;
	text-align: center;
}
.wp-pagenavi span,
.wp-pagenavi a{
	border: 1px solid #00000055;
	display: inline-block;
	padding: .5em;
	margin: .5em .2em;
	border-bottom: 5px solid var(--main-color);
}
.wp-pagenavi span.current,
.wp-pagenavi a.current{
	background-color: #8a2be255;
}


/*******************************************************************************
	*	Footer
*******************************************************************************/
footer{
	min-width: 300px;
	flex: 0;
	padding: 5em 2em;
}
footer .container{
	display: flex;
	justify-items: center;
	align-items: center;
	justify-content: space-between;
}
footer .footer-content{
	margin: 30px auto;
	background-color: white;
	width: 800px;
	max-width: 100%;
	font-size: .7em;
	line-height: 1.2em;
	text-align: center;
	padding: 20px;
	border: 2px dashed rgba(0, 0, 0, .4);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
}

footer .footer-content a,
footer .footer-content a:visited{
	color: var(--third-color);
}

/************************************************************************************************
	//	NDH Store
************************************************************************************************/
.store-archive{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}
.archive-product-thumbnail{
	text-align: left;
	flex-basis: 250px;
	padding: .5em;
	background-color: white;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.archive-addtocart{
	height: 2em;
}
.archive-product-thumbnail > a{
	display: block;
	flex-grow: 1;
}
.single-product-thumbnail{
	text-align: left;
	border-bottom: 1px solid goldenrod;
}

.archive-product-thumbnail .dollar-sign{
	vertical-align: super;
	font-size: .4em;
	margin-right: .3em;
}

.archive-product-thumbnail .thumbnail-data{
	padding: .3em .5em;
}
.archive-product-thumbnail h2{
	display: -webkit-box;
	font-size: .9em;
	font-weight: normal;
	border-bottom: 0;
	height: 3em;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	vertical-align: middle;
	width: 100%;
	padding: 0;
	text-align: left;
	height: 3em;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-top: 4px;
	line-height: 1.5em;
	margin-bottom: 0px !important;
}

.archive-product-thumbnail img,
.single-product-thumbnail img{
	display: block;
	margin: 0 auto;
	max-width: 100%;
	vertical-align: middle;
	width: 250px;
	height: 250px;
	padding: 0;
	object-fit: contain;
	border: 0px solid goldenrod;
	transition: all .5s;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.single-product-thumbnail img{
	margin: 5px;
	width: calc( 100% - 20px );
	background-color: white;
	height: auto;
	border-width: 0;
	border-radius: 0;
}

.archive-product-thumbnail a,
.single-product-thumbnail a{
	display: block;
	position: relative;
	transition: all .3s;
}

.archive-product-thumbnail .sale-price,
.archive-product-thumbnail .current-price{
	font-size: 1.5em;
}
.archive-product-thumbnail .regular-price{
	color: orangered;
}
.archive-product-thumbnail .badge{
	width: 200px;
	padding: 10px 0;
	vertical-align: middle;
	color: white;
	font-weight: bold;
	position: absolute;
	text-align: center;
	transform: rotate(-45deg);
	top: 10px;
	left: -70px;
}


.archive-product-thumbnail a:not(.button):hover{
	background-color: #6666CC11;
}
.archive-product-thumbnail a i.fa.fa-link{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -.5em;
	margin-top: -.5em;
	font-size: 3em;
	opacity: 0;
	transition: opacity .5s;
}
.archive-product-thumbnail a:hover i.fa.fa-link{
	opacity: 1;
}

.store main.main{
	padding-top: 0;
}

main.main > article{
	width: 100%;
}

.store main.main article > h3{
	color: var(--second-color);
	font-size: 1.5em;
	margin: .5em 0 .2em;
	padding: 10px 20px 10px 0px;
}


/************************************************************************************************
	//	Cart
************************************************************************************************/
.shop_table{
	width: 100%;
}

.shop_table .product-thumbnail img{
	width: 100px;
	height: 100px;
}
.shop_table .product-thumbnail{
	width: 150px;
	min-width: 150px;
}

.shop_table thead{
	border-bottom: 5px solid var(--main-color);
	font-weight: bold;
	text-transform: uppercase;
}
.shop_table tbody tr td{
	padding: 1em;
	vertical-align: middle;
	border-bottom: 1px solid var(--third-color);
}

.shop_table tbody tr td.product-price,
.shop_table tbody tr td.product-quantity,
.shop_table tbody tr td.product-subtotal{
	text-align: center;
}

.shop_table tbody tr td.product-remove .remove{
	font-size: 2em;
}

table.shop_table.cart .actions .coupon{
	width: 49%;
	display: inline-block;
}
table.shop_table.cart .actions .coupon label{
	display: none;
}
table.shop_table.cart .actions button.button{
	padding: 1em;
	cursor: pointer;
	border: 0;
	border-radius: 0;
}

table.shop_table.cart .actions input.input-text{
	width: 100%;
	margin: 1em 0;
}

table.shop_table.cart .actions button.button[name="update_cart"]{
	display: inline-block;
	width: 49%;
}
table.shop_table.cart .cart_item input[type=number]{
	width: 100px;
	text-align: center;
	font-size: 1em;
	border-radius: 0;
}

.cart_totals h2{
	font-size: 1.5em;
	text-align: center;
}


.cart_totals  .shop_table{
	margin-bottom: 1em;
}


.cart-collaterals .cart_totals{
	width: 50%;
	min-width: 300px;
	margin-left: auto;
}


/************************************************************************************************
	//	COMMENTS
************************************************************************************************/
.comments-template{
	border-radius: 2px;
	background-color: #22222211;
	padding: 1em;
}

.comment-form-comment textarea{
	padding: 1em;
}
a#cancel-comment-reply-link{
	color: var(--second-color);
}

.comment-body .comment-respond{
	border-top: 2px solid var(--third-color);
	margin-top: 1em;
	border-radius: 2px;
	overflow: hidden;
}
.comment-body .comment-respond p{
	margin: 0 1em 5px 1em;
}

.comments-template .commentlist{
	width: 90%;
	max-width: 700px;
	margin: auto;
	margin-top: 3em;
	padding-left: 0;
}

.comments-template h3{
	font-size: 1.3em;
	line-height: 1.3em;
	padding: .5em;
}

.comment-author,
.commentmetadata{
	background-color: #00000011;
}

.commentlist li li{
	padding-left: 2em;
}


.comment-body{
	border: 3px solid var(--second-color);
	border-radius: 2px;
	margin-bottom: 1em;
	padding: .5em;
	background-color: white;
	box-shadow: 3px 3px 5px #00000022;
}

.commentlist li:nth-child(even) > .comment-body{
/*	background-color: aliceblue;*/
}

li li.comment{
	margin-left: 2em;
	border-left: 2px solid #AAA;
	position: relative;
}
li li.comment:last-child{
	border-left: 0;
}
li li.comment:before{
	content: "⤷";
	color: #AAA;
	position: absolute;
	left: -2px;
	font-size: 2em;
	top: -20px;
}


.commentlist li .reply a.comment-reply-link,
.form-submit .submit{
	background-color: var(--second-color);
	cursor: pointer;
	border-radius: .5px;
}
.form-submit .submit{

}
.commentlist li .reply a.comment-reply-link{
	padding: 0 2em;
	width: auto;
	display: inline-block;
}
.commentlist li .reply a.comment-reply-link:before{
	content: "\f075";
	font-family: FontAwesome;
	margin-right: .5em;
}


.comment-respond label{
	display: block;
}
.comment-form-cookies-consent{
	display: flex;
	column-gap: 1em;
}


.comment-respond textarea[name="comment"],
textarea[name="comment"]{
	width: 100%;
}
.comment-meta.commentmetadata{
	padding: 0 .5em;
	font-size: .8em;
	font-style: italic;
	border-bottom: 1px solid #00000066;
}
.comment-body p{
	margin: .5em;
}

.avatar{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	float: left;
	margin-bottom: .5em;
	margin-top: .5em;
	margin-right: 1em;
	margin-left: -1.5em;
	border: 3px solid var(--second-color);
}

/*******************************************************************************
	*	FORMS
*******************************************************************************/
input{
	border-radius: 0px;
	border: 1px solid var(--third-color);
	height: 2em;
	font-size: 16px;
	padding: .2em 1em;
}
select{
	border-radius: 0px;
	border: 1px solid var(--third-color);
	height: 2em;
	font-size: 16px;
	padding: .2em 1em;
}

.woocommerce form label{
	font-size: 14px;
	color: gray;
}
form label:after,
.woocommerce form label:after{
	content: "\a";
	white-space: pre;
}

.woocommerce-form input[type="text"],
.woocommerce-form input[type="password"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="tel"],
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content select{
	width: 100%;
}

.tnp-subscription{
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
}

.tnp-subscription input[type=text],
.tnp-subscription input[type=email],
.tnp-subscription input[type=submit]{
	width: 100%;
}

.tnp-subscription label{
	vertical-align: middle;
}

.tnp-subscription label input[type=checkbox],
.tnp-subscription label a{
	font-size: 14px;
}
.tnp-subscription .tnp-privacy-field label{
	padding: 5px;
	display: flex;
	column-gap: 1em;
}


/*******************************************************************************
	Support
*******************************************************************************/
.centered-button{
	display: flex;
	justify-content: center;
}
.centered-button a.button{
	flex-basis: 400px;
}
.my-account .fancybox-content,
.my-account .fancybox-content .container{
	padding: 0;
}
.support-ticket-list .library-row-handler .name{
	width: 300px;
	text-overflow: ellipsis;
	flex-basis: 300px;
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
}
.support-ticket-list .library-row-handler .comment{
	width: 500px;
	text-overflow: ellipsis;
	flex-basis: 500px;
	overflow: hidden;
	text-align: left;
}
.support-ticket-list .library-row-handler .date{
	width: 150px;
	text-align: center;
	flex-basis: 150px;
}
.support-ticket-list .library-row{
	position: relative;
	overflow: visible;
}

.support-ticket-list .library-row.closed{
	background-color: #00000011;
}
.support-ticket-list .library-row.closed a{
	color: gray;
}



/************************************************************************************************
	//	TOOLS
************************************************************************************************/
.character-card{
	display: block;
	padding: 1em;
	margin: .5em 0;
	border: 1px solid var(--third-color);
	transition: all .5s;
}
.character-card:hover{
	background-color: #4682b422;
}

/************************************************************************************************
	//	Error 404
************************************************************************************************/
.error404{
	background-image: url(https://i.imgur.com/o0AeVrch.jpg);
	background-size: 100% auto;
	background-position: bottom;
	background-repeat: no-repeat;
}

.search-results h3{
	font-size: 1.5em;
}

.search-result-view h3:after{
	content: 'view »';
	font-size: .7em;
	margin-left: 1em;
}

.blog-result{
	color: var(--blog-color);
}
.store-result{
	color: var(--main-color);
}

form.searchform{
	text-align: center;
	padding: 1em;
}

.searchform div{
	display: flex;
	column-gap: 1em;
	justify-content: center;
}

.searchform input[type=text]{
	width: 70%;
	background-color: #dee9f2;
	padding: 1em;
	border-bottom: 3px solid var(--second-color);
	height: 3em;
}
.searchform input[type=submit]{
	width: 10%;
	cursor: pointer;
	border-bottom: 3px solid var(--second-color);
	height: 3em;
}



/*******************************************************************************
	NDH Library
*******************************************************************************/
.library-products-list{
	display: flex;
	flex-wrap: wrap;
	column-gap: .5em;
	row-gap: .5em;
}
.library-row{
	width: 100%;
	display: flex;
	border: solid var(--accent-color-transparent);
	border-radius: 10px 0 0 0;
	border-width: 1px 2px 3px 1px;
	padding: .5em;
	column-gap: 1em;
	row-gap: .5em;
	transition: all .5s;
	flex-wrap: wrap;
	flex-basis: 100%;
	flex-grow: 1;
	overflow: hidden;
}
.library-row-handler{
	column-gap: 1em;
	row-gap: 1em;
	display: flex;
	flex-basis: 100%;
	cursor: pointer;
	padding: .5em;
	border-radius: 5px;
	border:solid var(--accent-color-transparent);
	border-width: 0 1px 1px 0;
	transition: all .2s;
}

.library-row-handler:hover,
.library-row-handler.row-open{
	background-color: var(--accent-color-transparent);
}

.library-row-handler{
	overflow: hidden;
}
.library-row .title{
	font-size: 1em;
	font-weight: bold;
	color: var(--accent-color);
	flex-basis: 300px;
	display: flex;
	align-items: center;
	overflow: hidden;
	flex-grow: 1;
}
.library-row .title a{
	display: inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.library-row .library-thumbnail,
.library-row .library-thumbnail img{
	width: 160px;
	height: 160px;
	object-fit: contain;
	background-color: white;
}
.library-row .library-thumbnail img{
	padding: 5px;
}

.library-row .icon,
.library-row .open{
	display: flex;
	text-align: center;
	align-items: center;
	flex-basis: 60px;
	justify-content: center;
}
.library-row .icon .fa,
.library-row .open .fa{
	font-size: 2em;
	color: var(--accent-color);
	transition: all .5s;
}
.library-row .icon .fa{
	transform: rotate(-90deg);
}
.library-row .row-open .icon .fa{
	transform: rotate(0deg);
}
.library-row .download-links{
	display: none;
	border: solid var(--accent-color-transparent);
	border-width: 1px 2px 2px 1px;
	padding: 1em;
	flex-basis: 100%;
	max-width: 100%;
	transition: all .5s;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 1em;
	justify-content: center;
	align-items: center;
	background-color: white;
}
.library-row .row-open+.download-links{
	background-color: white;
	display: flex;
}
.download-link-rows{
	flex-basis: 600px;
}
.download-links .download-link-row{
	padding: 5px;
	display: flex;
	flex-basis: 600px;
	flex-wrap: wrap;
	justify-content: center;
}
.download-links .download-link-row:hover{
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(70,130,180,0.1) 80%, rgba(70,130,180,0.2) 100%);
}


.download-links .download-link-row .download-name{
	flex-grow: 1;
	flex-basis: 300px;
}
.download-links .download-link-row .download-link{
	flex-basis: 200px;
}


.content-filter{
	margin: 1em 0;
	display: flex;
	column-gap: 1em;
	flex-wrap: wrap;
}
.content-filter div{
	flex-grow: 1;
	flex-basis: 150px;
}
.content-filter div.name-filter{
	flex-basis: 600px;
}
.content-filter div select,
.content-filter div input[type=text]{
	width: 100%;
}
.content-filter div input[type=text]::placeholder {
	font-style: italic;
	opacity: .3;
	color: var(--accent-color);
}
.content-filter div select option[disabled]{
	font-style: italic;
	opacity: .3;
	color: var(--accent-color);
}

.single-element-wrapper{
	max-width: 600px;
	margin: 1em auto;
	padding: .5em;
	border: 1px solid var(--accent-color);
	background-color: white;
	box-shadow: 5px 5px 5px #00000066;
}
.single-element-wrapper table{
	width: 100%;
	text-align: center;
}
.single-element-wrapper .card-title{
	font-size: 2em;
}
.single-element-wrapper h3{
	font-size: 1.3em;
}
.scrollable{
	height: calc( 100vh - 460px );
	min-height: 370px;
	overflow-y: auto;
}
.monster-text-box{
	min-height: 200px;
	height: calc( 100vh - 650px );
	overflow-y: auto;
}
.ndh_library .scrollable table thead{
	top: 0;
}

.placeholder-element{
	width: 100%;
	background-image: url(https://i.imgur.com/wi1hoiTh.jpg);
	background-position: bottom right;
	background-size: 150% auto;
	background-repeat: no-repeat;
	padding: 2em;
}
.placeholder-element:before{
	font-size: 1.5em;
	padding: .5em;
	text-align: center;
	border-bottom: 2px solid var(--accent-color);
	display: block;
	line-height: 1.3em;
}
.placeholder-element.placeholder-monster:before{
	content:'Choose a monster from the list';
}
.placeholder-element.placeholder-spell:before{
	content:'Choose a spell from the list';
}
.main .post-body .single-element-wrapper table{
	font-size: .8em;
}

/************************************************************************************************
	//	ICONS
************************************************************************************************/
.gi{
	display: inline-block;
	width: 32px;
	height: 32px;
	background-size: contain;
}


/************************************************************************************************
	//	Library Content
************************************************************************************************/
.panel-body .post-body{
	display: block;
	background-color: white;
	padding: 10px;
	margin: 0;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	flex-grow: 1;
}

.panel-body .post-body h1,
.panel-body .post-body h2,
.panel-body .post-body h3,
.panel-body .post-body h4{
	font-weight: normal;
}
.panel-body .post-body h5{
	font-weight: bold;
}
.panel-body .post-body h2{
	font-size: 1.5em;
}
.panel-body .post-body h3{
	font-size: 1.3em;
}
.panel-body .post-body h4{
	font-size: 1.1em;
}
.panel-body .post-body h5{
	font-size: 1em;
}

.panel-body .panel,
.panel-body .panel .panel-body{
	flex-grow: 1;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.table-responsive{
	overflow-x: auto;
}
.table-responsive table{
	width: 100%;
}
.table-responsive table td{
}
.ndh_library table thead{
	position: sticky;
	top: 0px;
	color:  var(--library-card-text-color);
	background-color: var(--library-background-color);
}

.ndh_library .library-wrapper .panel-body h1+br,
.ndh_library .library-wrapper .panel-body h2+br,
.ndh_library .library-wrapper .panel-body h3+br,
.ndh_library .library-wrapper .panel-body h4+br,
.ndh_library .library-wrapper .panel-body h5+br,
.ndh_library .library-wrapper .panel-body h6+br,
.ndh_library .library-wrapper .panel-body div+br,
.ndh_library .library-wrapper .panel-body br+br,
.ndh_library .library-wrapper .panel-body p+br,
.ndh_library .library-wrapper .panel-body ul>br,
.ndh_library .library-wrapper .panel-body li+br,
.ndh_library .library-wrapper .panel-body blockquote > br:first-child,
.ndh_library .library-wrapper .panel-body blockquote > br:last-child{
	display: none;
}

/************************************************************************************************
	//	Fullscreen Library Mode
************************************************************************************************/
.ndh_library footer,
.ndh_library .main-menu,
.ndh_library .top-bar{
	transition: all .5s;
}

.fullscreen-library.ndh_library footer,
.fullscreen-library.ndh_library .main-menu,
.fullscreen-library.ndh_library .top-bar{
	display: none;
}
.fullscreen-library.ndh_library .library-header{
	margin-top: 0;
}

/*******************************************************************************
	Compendium
*******************************************************************************/
.compendium-filterable{
	display: flex;
	column-gap: 1em;
	flex-wrap: wrap;
	flex-grow: 1;
}
.compendium-filterable .filterable{
	flex-basis: 400px;
	flex-grow: 1;
}
.compendium-filterable .single-content{
	display: flex;
	flex-basis: 300px;
	flex-grow: 1;
	justify-content: center;
	transition: all 1s;
}

.filterable-table{
	display: block;
}
.filterable-header{
	display: flex;
	top: 0;
	position: sticky;
}
.filterable-body{
	padding-right: .5em;
}
.filterable-header > .filterable-row{
	margin: 0;
	background-color: var(--library-card-background-color);
	color: whitesmoke;
}

.filterable-row{
	display: flex;
	flex-basis: 100%;
	border-radius: 0 0 5px 0;
	box-shadow: 3px 4px 3px lightgray;
	border: 1px solid var(--main-color-light);
	margin: .5em 0;
	transition: all .2s;
	display: flex;
	flex-basis: 100%;
}
.filterable-row > div{
	flex-basis: 100px;
	text-align: center;
	padding: .5em;
}
.filterable-row > div:nth-child(2){
	flex-basis: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.filterable-row > .name{
	text-align: left;
	flex-basis: 200px;
	flex-grow: 1;
	padding-left: 1em;
}
.filterable-row .name a{
	transition: all .2s;
	display: block;
	padding: .5em 1em;
}
.filterable-body .filterable-row:hover{
	background-color: var(--accent-color-transparent);
}
.filterable-body .filterable-row.active{
	background-color: var(--accent-color);
	color: white;
}
.filterable-body .centered-button{
	margin: 10%;
}


/*******************************************************************************
	Breadcrumb
*******************************************************************************/
.library-header{
	width: 100%;
	top: -1px;
	margin: 2em auto 0;
	height: 55px;
	z-index: 90;
	position: sticky;
	border-radius: 0;
	box-shadow: 0 5px 5px #00000066;
	border: 2px solid var(--library-background-color);
	background-color: var(--library-background-color);
	color: var(--library-card-text-color);
	max-width: 1400px;
	width: 98%;
	display: flex;
}

.library-header a{
	color: var(--library-card-text-active-color);
}

.library-sources{
	display: flex;
	position: relative;
	overflow: hidden;
	flex-grow: 1;
}
.library-sources .library-source{
	position: relative;
	background-color: var(--accent-color-transparent);
	padding: 0 1em;
	justify-content: center;
	align-content: center;
	align-items: center;
	display: flex;
	margin-left: 10px;
	padding-left: 40px;
	transition: all .5s;
}
.library-sources .library-source:empty{
	display: none;
}

.library-sources .library-source:first-child{
	margin-left: 0px;
}

.library-sources .library-source a{
	color: var(--library-card-text-color);
}
.library-sources .library-source.active,
.library-sources .library-source.active a,
.library-sources .library-source a:hover{
	color: var(--library-card-text-active-color);
}

.library-sources .library-source:after{ 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 20px solid var(--accent-color-transparent);
	position: absolute;
	top: 50%;
	margin-top: -40px; 
	left: 100%;
	z-index: 2; 
}
.library-sources .library-source:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 40px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 40px solid transparent;
	border-left: 20px solid var(--library-background-color);
	position: absolute;
	top: 50%;
	margin-top: -40px;
	margin-left: 0px;
	left: 0%;
	z-index: 1; 
}
.library-sources .library-source:first-child::before{
	display: none;
}
.library-sources .library-source img{
	width: 2em;
	margin-right: 1em;
}

.library-sources .library-source i.fa,
.library-sidebar i.fa{
	font-size: 1.3em;
	transition: all .5s;
}
.library-sources .library-source .button,
.library-sidebar .button{
	margin-left: 1em;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	display: inline;
}
.library-sources.library-header-buttons{
	flex-grow: inherit;
}
.library-sources.library-header-buttons .library-source{
	padding: 0 1em;
	cursor: pointer;
}
.library-header-buttons.library-sources .library-source i.fa{
	font-size: 1em;
}
.fullscreen-library .library-header-buttons.library-sources .library-source.fullscreen-library-mode{
	color: white;
}

.library-sources.library-header-buttons{
	padding: 10px;
}
.library-sources.library-header-buttons .library-source:after,
.library-sources.library-header-buttons .library-source:before{
	display: none;
}
.library-sources.library-header-buttons .library-source{
	margin-left: 5px;
}


/*******************************************************************************
	Segments Menu
*******************************************************************************/
.segment-menu{
	float: left;
	padding: 1em;
	border: 2px solid var(--third-color);
	margin-right: 1em;
}

/************************************************************************************************
	//	Character Sheets
************************************************************************************************/
.character-sheet{
	font-size: .9em;
	font-family: 'Roboto Slab', sans-serif;
	background-image: url(https://i.imgur.com/SgIbZuy.png);
	background-color: #00000011;
}
.character-sheet{
	text-align: center;
	padding: .5em;
	border: 1px solid var(--main-color);
}
.sheet-row{
	flex-wrap: wrap;
	column-gap: .5em;
	display: flex;
	margin: .5em 0;
	background-color: var(--accent-color-transparent);
	padding: .5em;
	border: 1px solid var(--main-color);
	justify-content: stretch;
}
.sheet-row:first-child{
	margin-top: 0;
}
.sheet-row:last-child{
	margin-bottom: 0;
}
.sheet-row > *{
	flex: auto;
	flex-basis: 90px;
}
.sheet-row input,
.sheet-row select{
	font-family: 'Roboto Slab', sans-serif;
	width: 100%;
	color: #555;
}
p:empty{
	display: none;
}

.level{
	flex-basis: 10px;
}
.level select{
	text-align: center;
}

.score input{
	text-align: center;
}
.score .mod{
	width: 100%;
	height: 2em;
	margin-top: .5em;
	background-color: var(--accent-color-transparent);
	border: 1px solid var(--accent-color);
}

.sheet-row.features{
	text-align: left;
}

.sheet-row.features .character-features{
	flex-basis: 30%;
}
.sheet-row.features .feature-descriptions{
	flex-basis: 60%;
}

.character-features > ul > li,
.feature-descriptions > ul > li{
	list-style: none;
}
.character-features > ul > li > a{
	border: 1px solid var(--accent-color);
	font-size: .9em;
	padding: .5em 1em;
	display: block;
	width: 100%;
	height: 100%;
}

.scroll-box{
	border: 1px solid var(--accent-color);
	scroll-behavior: smooth;
	height: 300px;
	overflow-y: scroll;
	scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


.scroll-box ul li{
	list-style: none;
	padding: .5em;
}

.character-features ul li:first-child,
.scroll-box ul li:first-child{
	margin-top: 0;
}
.character-features ul li:last-child,
.scroll-box ul li:last-child{
	margin-bottom: 0;
}

.character-features-categories{
	border: 1px solid var(--accent-color);
	flex-basis: 100%;
	margin-bottom: .5em;
}
.character-features-categories ul{
	display: flex;
}
.character-features-categories ul li{
	margin: 0;
	text-align: center;
	list-style: none;
	flex: auto;
	flex-basis: 10%;
}



/************************************************************************************************
	//	Micro Dungeons
************************************************************************************************/
.micro-dungeon h3{
	padding: .5em 1em;
	font-family: 'Special Elite', sans-serif;
	font-weight: bold;
	font-size: 1.1em;
	color: white;
	margin: 0;
	background-color: #812000;
	border-bottom: 0;
}
.single .main .post-body .micro-dungeon aside h3{
	background-color: black;
}
.single .main .post-body .micro-dungeon h3,
.micro-dungeon h3 a{
	color: white;
}
.micro-dungeon cite{
	font-style: italic;
	background-color: #812000;
	color: white;
	border-radius: 3px;
	padding: .1em .5em;
}

.micro-dungeon cite a{
	color: white;
}




/************************************************************************************************
	//	TEMP SRD
************************************************************************************************/
body.single-monsters .hero-header,
body.single-monsters section.main .container .comments-template,
body.single-spells .hero-header,
body.single-spells section.main .container .comments-template{
	display: none;
}
body.single-monsters section.main .container,
body.single-spells section.main .container{
	max-width: 800px;
}

body.single-monsters table.monster.top-row,
body.single-monsters table.monster.bottom-row,
body.single-spells table.monster.spell-top-row,
body.single-spells table.monster.spell-bottom-row{
	width: 100%;
	text-align: center;
}
.creative-commons-text{
	width: 600px;
	max-width: 100%;
	display: none;
	padding: 3em;
	font-size: 12px;
	line-height: 1.2em;
}


/*******************************************************************************
	AJAX
*******************************************************************************/
.loader{
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 100px;
	height: 100px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	align-self: center;
	justify-self: center;
	position: relative;
}
.loader:after{
	position: relative;
	top: 50%;
	left: 50%;
	display: block;
	content: '';
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 50px;
	height: 50px;
	-webkit-animation: spin2 2s linear infinite; /* Safari */
	animation: spin2 2s linear infinite;
	align-self: center;
	display: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes spin2 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-720deg); }
}
article .post-body #loader-wrapper{
	display: flex;
	flex-grow: 1;
	height: 100%;
	justify-content: center;
	align-content: center;
	padding: 3em;
}

main.main{
	display: flex;
}
main.main > .post-body#main-post-body{
	flex-basis: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	max-width: 100%;
}
main.main > .post-body#main-post-body > div[data-request]{
	width: 100%;
	max-width: 100%;
}

main.main > .post-body#main-post-body .loader{
	justify-self: center;
}

/*******************************************************************************
	*	
*******************************************************************************/

@media only screen{
	.screen-reader-text{
		display: none;
	}
}

@media print{
	.single.product .hero-header, .single.post .hero-header{
		background-image: none;
		background-color: white;
		padding: 0;
		margin: 0;
		min-height: 0;
		height: auto;
		box-shadow: none;
	}
	.hero-header h1{
		color: black;
		text-shadow: none;
		font-size: 2em;
		text-align: left;
	}
	body{
		background-color: white;
		background-image: none;
		font-size: 12px;
		margin: 0.25in;
	}
	section.main .container,
	section.main .container article,
	.single section.main .container article .post-body,
	.single.product .hero-header .container, .single.post .hero-header .container{
		margin: 0;
		padding: 0;
		width: 100%;
		border-left: 0;
	}
	.top-bar,
	.main-menu,
	footer,
	.comments-template,
	.hero-bg{
		display: none;
	}
}


/************************************************************************************************
	//	Simple Columns System
************************************************************************************************/
.columns{
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 1em;
	width: 100%;
}
.columns > .col{
	flex-grow: 1;
}
.columns > .col-50{ flex-basis: 50px; }
.columns > .col-100{ flex-basis: 100px; }
.columns > .col-150{ flex-basis: 150px; }
.columns > .col-200{ flex-basis: 200px; }
.columns > .col-250{ flex-basis: 250px; }
.columns > .col-300{ flex-basis: 300px; }
.columns > .col-400{ flex-basis: 400px; }
.columns > .col-500{ flex-basis: 500px; }
.columns > .col-600{ flex-basis: 600px; }
.columns > .col-700{ flex-basis: 700px; }
.columns > .col-800{ flex-basis: 800px; }
.columns > .col-900{ flex-basis: 900px; }
.columns > .col-1000{ flex-basis: 1000px; }

.p-5{ padding:5px;  }
.p-10{ padding:10px;  }
.p-15{ padding:15px;  }

.justify-content-between{
	justify-content: space-between;
}
.justify-content-around{
	justify-content: space-around;
}
.justify-content-center{
	justify-content: center;
}
.align-items-center{
	align-items: center;
}

.rows{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 1em;
	width: 100%;
}
.rows > .row{
	flex-grow: 1;
}

/*******************************************************************************
	COLORS
*******************************************************************************/
.bg-white{	background-color: white;		}
.bg-blue{	background-color: steelblue;	}
.bg-red{	background-color: indianred;	}
.bg-orange{	background-color: var(--main-color); }
.bg-green{	background-color: darkgreen; }

.text-white{	color: white;				}
.text-blue{		color: steelblue;			}
.text-red{		color: indianred;			}
.text-orange{	color: var(--main-color);	}
.text-green{	color: green;				}

.fa.green{	color: green;	}

body .button.bg-white:hover{	background-color: white;				}
body .button.bg-blue:hover{		background-color: lightsteelblue;		}
body .button.bg-red:hover{		background-color: indianred;			}
body .button.bg-orange:hover{	background-color: var(--main-color);	}


/*******************************************************************************
	Font SIZES
*******************************************************************************/
.text-8{	font-size: .8em; }
.text-9{	font-size: .9em; }
.text-10{	font-size: 1em; }
.text-11{	font-size: 1.1em; }
.text-12{	font-size: 1.2em; }
.text-13{	font-size: 1.3em; }
.text-14{	font-size: 1.4em; }
.text-15{	font-size: 1.5em; }
.text-16{	font-size: 1.6em; }
.text-17{	font-size: 1.7em; }
.text-18{	font-size: 1.8em; }
.text-19{	font-size: 1.9em; }
.text-20{	font-size: 2.0em; }
.text-25{	font-size: 2.5em; }
.text-30{	font-size: 3.0em; }
.text-35{	font-size: 3.5em; }
/************************************************************************************************
	//	Simple Panels
************************************************************************************************/
.panel{
	display: flex;
	border: 2px solid whitesmoke;
	background-color: var(--accent-color-transparent);
	column-gap: .5em;
	row-gap: .5em;
	padding: .5em;
	flex-wrap: wrap;
	border-radius: 3px;
}
.panel-header{
	background-color: var(--library-card-background-color);
	color: white;
	flex-basis: 100%;
	flex-grow: 1;
	padding: .5em;
	text-align: center;
}
.library-wrapper main.main .panel-header h1,
.library-wrapper main.main .panel-header h2,
.library-wrapper main.main .panel-header h3,
.library-wrapper main.main .panel-header h4{
	font-size: 1.7em;
	padding: 0;
	margin: 0;
	border: 0;
}
.panel-body{
	background-color: var(--accent-color-transparent);
	flex-basis: 100%;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	padding: .5em;
	max-width: 100%;
	column-gap: .5em;
	row-gap: .5em;
}
.library-wrapper main.main table{
	width: 100%;
}

/************************************************************************************************
	//	Cards
************************************************************************************************/
.card-element{
	border: 2px solid var(--library-background-color);
	position: relative;
	border-radius: 3px;
	padding: .5em;
	background-color: whitesmoke;
	margin-top: 60px;
}
.card-element .card-thumbnail{
	border: 2px solid var(--library-background-color);
	border-radius: 3px;
	padding: .3em;
	background-color: white;
	width: 120px;
	height: 120px;
	position: absolute;
	left: calc( 50% - 60px );
	top: -60px;
	transition: all .2s;
	display: flex;
}
.card-element .card-thumbnail img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-element .card-thumbnail.thumbnail-circle,
.card-element .card-thumbnail.thumbnail-circle img{
	border-radius: 50%;
}
.card-element .card-thumbnail.thumbnail-rounded,
.card-element .card-thumbnail.thumbnail-rounded img{
	border-radius: 10%;
}
.card-element .card-thumbnail.thumbnail-diamond,
.card-element .card-thumbnail.thumbnail-diamond img{
	border-radius: 0;
}
.card-element .card-thumbnail.thumbnail-diamond{
	transform: rotate(-45deg) scale(.9);
}
.card-element .card-thumbnail.thumbnail-diamond img{
	border: 2px solid var(--library-background-color);
	padding: .3em;
	background-color: whitesmoke;
	transform: rotate(45deg) scale(1.2);
	transition: all .2s;
}

.card-element:hover .card-thumbnail{
	transform: scale(1.1);
}

.card-element:hover .card-thumbnail.thumbnail-diamond{
	transform: rotate(-135deg) scale(.8);
}
.card-element:hover .card-thumbnail.thumbnail-diamond img{
	transform: rotate(135deg) scale(1.2);
}


.card-element .card-title{
	padding-top: 60px;
	background-color: var(--library-background-color);
	color: whitesmoke;
}
.card-element .card-title h1,
.card-element .card-title h2,
.card-element .card-title h3,
.card-element .card-title h4{
	font-size: 1.3em;
	text-align: center;
	margin: 0;
	margin-bottom: .4em;
	padding: 0;
	border: 0;
	color: whitesmoke;
	border-bottom: 2px solid var(--library-background-color);
}

.card-element .card-title h1 a,
.card-element .card-title h2 a,
.card-element .card-title h3 a,
.card-element .card-title h4 a{
	color: whitesmoke;
}

.card-element .card-body{
	font-size: .8em;
	line-height: 1.4em;
	color: var(--library-card-text-color);
}



/************************************************************************************************
	//	NEWSLETTER
************************************************************************************************/
.tnp-field label{
	display: flex;
	align-items: center;
	padding: 0px 5px;
	column-gap: 1em;
}
.tnp-field label a{
	display: flex;
	justify-content: center;
	align-items: center;
}
body.newsletter .tnp-field.tnp-lists{
	display: none;
}

.tnp.tnp-subscription{
	width: 700px;
}
.tnp.tnp-subscription form{
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 1em;
	margin-bottom: 1em;
}

.tnp-field.tnp-field-firstname,
.tnp-field.tnp-field-surname{
	flex-basis: 270px;
	flex-grow: 1;
}
.tnp-field.tnp-field-email,
.tnp-field.tnp-privacy-field,
.tnp-field.tnp-field-button{
	flex-basis: 100%;
}
.tnp-field.tnp-privacy-field label:hover{
	background-color: #5089b844;
	cursor: pointer;
}
.tnp-field.tnp-field-button input[type=submit]{
	font-size: 1.1em;
	padding: .5em;
	text-transform: uppercase;
	font-weight: bold;
}

/*******************************************************************************
	JUST ADDED
*******************************************************************************/
.shopping-cart .woocommerce-Price-amount.amount{
	display: inline;
	padding: 0;
}

.just-added-product-related .products.columns-4{
	margin: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 1em;
	font-size: .8em;
	padding: 0;
}
.just-added-product-related .products.columns-4 h2{
	font-size: 1em;
}
.just-added-product-related .products.columns-4 li{
	background-color: white;
	list-style: none;
	padding: 1em;
	flex-basis: 200px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.just-added-product-related .related.products h2{
	display: none;
}

.woocommerce-error .button.wc-forward,
.woocommerce-message .button.wc-forward{
	margin-top: 1em;
}

/************************************************************************************************
	//	Responsive
************************************************************************************************/
@media only screen and (max-width: 794px) {
	aside.sidebar.store-sidebar-container{
		width: 100%;
		flex-grow: 1;
		transition: all .5s;
		display: none;
	}
	aside.sidebar.store-sidebar-container.mobile-menu-shown{
		display: block;
		margin-top: 0vh;
	}
	.library-wrapper main.main{
		padding: 0;
	}
	.library-wrapper main.main table{
		font-size: .9em;
	}
	.single-element-wrapper{
		overflow-x: scroll;
	}
	.resource-toggle span{
		display: none;
	}
	.library-resources .resource{
		flex-basis: auto;
	}
	.my-account aside.sidebar.store-sidebar-container{
		display: block;
		min-height: 0;
	}
	.my-account aside.sidebar.store-sidebar-container .source-manager{
		display: none;
	}
	ul.sources.selector{
		display: flex;
	}
	ul.sources.selector li{
		width: 50%;
	}
	.hero-header .container{
		padding: 1em;
	}
	.home-featured .featured-text,
	.home-featured .featured-visual,
	.articles.container article.post-body{
		width: 100%;
		flex-basis: 100%;
	}
	.woocommerce-checkout .col2-set{
		flex-wrap: wrap;
	}




}
@media only screen and (max-width: 990px) {
	aside.sidebar.store-sidebar-container{
		width: 190px;
	}
}


.woocommerce-cart-form{
	overflow-x: auto;
}