/*===============================================================
BUTTONS, pagination and pageNavigation FOR ALL PAGES
===============================================================*/
/*
	Common Styles for all BUTTON CLASSES
*/
[class*="button-"] {
	font-family	: "Roboto";	
	background-color: #fff;
	color: #434241;
	border: 1pt #000000 none;
/*	padding: 10px 16px; */
	padding: 13px 60px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.2em;
	margin: 4px 0;
	cursor: pointer;
	border-radius: 2px;
	transition: background-color .4s;
}

[class*="button-"]:hover {
	background-color: #eee;
	color: #000;
}

/*
	BUTTON CLASS: button-basic - the main color of the site
*/
.button-basic {
	background-color: #a333dd;
	padding: 8px;
	background-image: none;
	margin: 0;
	border: 1px solid #fff;
	color: #fff;
}
.button-basic:hover {
	background-color: #3399dd;
	background-image: none;
	color: #fff;
}


/*
	BUTTON CLASS: button-bg
*/
.button-bg {
	background-color: #ec821d;
    border: 1px solid #989795;
	padding-top: 8px;
	padding-bottom: 8px;
}

/*
	BUTTON CLASS: button-border
*/
.button-border {
	background-color: #fff;
	color: #5bcec3;
	border: 2px solid #5bcec3;
	padding-top: 8px;
	padding-bottom: 8px;
}

.button-border:hover {
	background-color: #5bcec3;
	color: #fff;
}

/*
	BUTTON CLASS: button-normal
*/
.button-normal {
	color: #222;
	border: 2px solid #bbb;
	padding-top: 8px;
	padding-bottom: 8px;
	background: #eee linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.button-normal:hover {
	border: 2px solid #5bcec3;
	background: #5bcec3 linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
}

/*
	BUTTON CLASS: button-shadow
*/
.button-shadow {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button-shadowHover:hover {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

/*
	BUTTON CLASS: button-arrow
*/
.button-arrow {
	background-color: #5bcec3;
	padding: 10px 20px;
	min-width: 120px;
	white-space: nowrap;
	transition: all 0.3s;
}

.button-arrow span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.3s;
}

.button-arrow span:after {
	content: '»';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.3s;
}

.button-arrow:hover {
	background-color: #726139;
	color: #fff;
}

.button-arrow:hover span {
	padding-right: 25px;
}

.button-arrow:hover span:after {
	opacity: 1;
	right: 0;
}

.orderDesc:after {
	content: "\25bc"
}

.orderAsc:after {
	content: "\25b2"
}

/*
	===============================================================
	PAGANATION AND PRIVIOUS-NEXT BUTTONS
	For calendars: Months and Weeks: Weeks include 2 Flex ULs
	===============================================================
*/

.pagination {
	text-align: center;
	margin-bottom: 2px;
}

.pagination ul {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex: 1;
	padding: 0;
	margin: 0;
	list-style: none;
}

.pagination li {
	padding: 0;
	margin: 0 1px 0 0;
	background-color: #fff;
	transition: background-color 0.3s;
	cursor: pointer;
	border: 1px solid #ccc;
}
.pagination >ul> li:last-child {
	margin: 0;
}

.pagination li.active,
.pagination li:hover {
	background-color: #ccc;
	background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

.pagination li li {
	flex-grow: 1;
	flex-basis: 0;
}

.pagination li span,
.pagination li a {
	color: #000;
	display: block;
	padding: 10px 0;
	margin: auto;
	text-align: center;
	text-decoration: none;
}

.pagination>ul>li:first-child {
	padding: 0 0.6em;
	border-radius: 7px 0 0 7px;
}

.pagination>ul>li:last-child {
	padding: 0 0.6em;
	border-radius: 0 7px 7px 0;
}

.pagination>ul>li:nth-child(2) {
	flex: auto;
}

/*
	The second LI is either a Header or includs a second Flex UL
*/
.pagination>ul>li:nth-child(2):hover {
	background-color: #fff;
	background-image: none;
}

.pagination .removeStyles {
	background: none !important;
	margin: 0 !important;
	border: 0 !important;
}


/*
	===============================================================
	PAGE NAVIGATION FOR ARCHIVES
	===============================================================
*/

.pageNavigation {
	clear: both;
	margin: 0;
	padding: 0.25em 0.5em;
	text-align: center;
	line-height: 100%;
	background: #f6f6f6;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	border: 1px solid #eee;
	border-radius: 7px;
}

.pageNavigation ul {
	display: block;
	text-align: center;
	padding: 0;
	margin: 0 auto;
}

.pageNavigation li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.pageNavigation li span,
.pageNavigation li a {
	color: black;
	display: inline-block;
	padding: 1em 0.75em;
	margin: 1px 0;
	vertical-align: middle;
	text-decoration: none;
	background-color: #ddd;
	background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
	border: 1px solid #ddd;
	transition: background-color 0.3s;
}

.pageNavigation li span {
	color: #ccc;
	background-color: #f0f0f0;
	background-image: none;
}

.pageNavigation li:first-child a {
	border-radius: 5px 0 0 5px;
}

.pageNavigation li:last-child a {
	border-radius: 0 5px 5px 0;
}

.pageNavigation li a:hover {
	background-color: #ddd;
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9));
}

.pageNavigation form {
	display: inline-block;
	margin: 4px auto;
	padding: 6px 16px;
	background: #eee;
	background-image: linear-gradient(rgba(255, 255, 255, 8), rgba(255, 255, 255, 0));
	border: 1px solid #ddd;
	border-radius: 5px;
}

.pageNavigation input,
.pageNavigation select {
	vertical-align: middle;
	font-size: 1em;
	color: #000;
	padding: 4px 2px 4px 6px;
	min-width: 3em;
	height: 2em;
	border: 1px solid #ddd;
	border-radius: 5px 0 0 5px;
}

.pageNavigation input[type=submit] {
	cursor: pointer;
	background: #fff;
	border-radius: 0 5px 5px 0;
	padding: 4px 2px 4px 6px;
}

.pageNavigation input[type=submit]:hover {
	background: #ccc;
}

.pageNavigationTop {
	float: right;
	font-size: 0.75em;
	padding-right: 0;
	background: none;
	border: none;
	opacity: 0.8;
}
.pageNavigationTop li span,
.pageNavigationTop li a {
	padding: 0.6em 0.5em;
}