/*--------------------------------
 	General page styling
-------------------------------*/
#bgphoto	{
	position: absolute; top: 0; left: 0; width: 100%; height: 900px; z-index:-1;
	background: #fff url(/img/layout/pagebg8.jpg) no-repeat center top; background-size: cover;
	opacity: 0.8; transition: background 0.3s ease-out;
	/*background-attachment: fixed;*/
}
body.dark #bgphoto {
	background: #222 url(/img/layout/pagebg8-dark.jpg) no-repeat center top; background-size: cover;
	opacity: 1;
}
main	{
	/*background-color: rgba(255,255,255,0.8);*/
	max-width: 1400px;
	/*-webkit-box-shadow: 20px 0 20px -20px #CCC, -20px 0 20px -20px #CCC; -moz-box-shadow: 20px 0 20px -20px #CCC, -20px 0 20px -20px #CCC;
	box-shadow: 20px 0 20px -20px #CCC, -20px 0 20px -20px #CCC;*/
}

h1		{ font-size: 2.2em; }
h2		{ font-size: 1.6em; font-weight: bold; }

main a.glowbutton, input[type="submit"] {
	font-size: 1.2em; line-height: 50px; height: 50px; min-width: 230px;
}
main .leftbuttons a		{ margin-right: 24px !important; }

/*--------------------------------
 	Objects
-------------------------------*/
.center				{ text-align: center; }
.nomargin			{ margin: 0; }
.steps				{ font-size: 1.4em; text-align: left; }
span.errorfield, .span_orange	{ color :#F60; }
p.intro				{ font-size: 1.2em; }
.imgshadow			{ margin: 6px; box-shadow: 3px 3px 5px 0px rgba(201,201,201,1); }

/*--------------------------------
 	Forms
-------------------------------*/
input[type="text"], input[type="email"] 	{ width: 220px; }
input, select					{ font-size: 1.2em; }

/*--------------------------------
 	Tables
-------------------------------*/
th				{ background-color: rgba(0,0,0,0.1); }
tr.alternate_on td		{ background-color: #fff; }
tr.alternate_off td		{ background-color: #eee; }

/*--------------------------------
 	Columns with flex
-------------------------------*/
div.c2, div.c3			{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; justify-content: space-around; margin: 60px 0 60px 0; }
div.c2 > div			{ flex-grow: 1; flex-basis: 0; min-width: 400px; }
div.c2 > div:first-child	{ padding-right: 12px; }
div.c3 > div			{ flex-grow: 1; flex-basis: 0; max-width: 280px; }
div.c2 h2			{ margin-top: 0; }
div.c2 dl			{ margin-right: 20px; min-width: 300px; }
div.c2 dt			{ padding: 0; color: #F60; font-size: 1.2em; }
div.c2 dd			{ margin-left: 0; padding: 10px 0 30px 0px; }
div.columnbg 			{ background-color: #f0f0f0; margin: 0; padding: 30px; }
div.c2 .leftbuttons		{ margin-top: 60px; }
div.c2 > div:first-child img	{ margin: 0 0 20px 0; }
div.c2 > div:last-child img	{ margin: 0 20px 20px 0; }

/*--------------------------------
 	Homepage
-------------------------------*/
#startdiv			{ min-height: 60px; } /* prevent page reordering when this grows or shrinks */
.home_partners > img		{ margin: 16px 40px 0 40px !important; }

#pagesearch p a			{ margin: 0 15px 0 0; }

/* Searchpage */
#pagesearch			{ display: inline-block; width: 100%; max-width: 600px; }
#pagesearch #qfield		{
	width: 80%; height: 25px; font-size: 1.4em;
	background: #FFF; color: #666; padding: 8px; text-indent: 3px;
	margin: 0;
	border-radius: 3px 0 0 3px;
	border-width: 1px 0 1px 1px;
}

#pagesearch_submit		{
	float: right; margin: 0; height: 31px; position: absolute; background: #FFF;
	border-width: 1px 1px 1px 0; border-style: solid; border-color: #CCC; border-radius: 0 3px 3px 0;
}

/*--------------------------------
 	Start webshop
-------------------------------*/
#startimg			{ margin-top: -60px; }
.startform			{ display: inline-block; margin: 0; padding: 0; white-space: nowrap; }
.startform input		{ margin: 0; }
.startform input:first-child	{ display: block; float: left; width: 300px; height: 38px; border-radius: 3px 0 0 3px; border-right: 0px; font-size: 1.4em; text-indent: 6px }
.startform input:last-child	{ border-radius: 0 3px 3px 0; width: 220px; min-width: auto; }


/*--------------------------------
 	POS
-------------------------------*/
.posorder_price			{ font-size: 2em; line-height: 60px; font-weight: bold; color: #333; }


/*--------------------------------
 	News items
-------------------------------*/
div#news			{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; }
div#news > div			{ width: 640px; margin: 14px 0; }
div#news h2			{ font-size: 1.4em; font-weight: normal; }
div#news img			{ float: left; max-width: 200px; max-height: 112px; margin: 0 12px 5px 0; opacity: 0.8; transition: opacity 0.4s ease-in; }
div#news > div:hover img	{ opacity: 1; }


/*--------------------------------
 	Prices
-------------------------------*/
#pricetable			{ background-color: #fff; border-collapse: collapse; margin-top: 40px; }
#pricetable, #pricetable th,
		#pricetable td	{  border: 1px solid #ccc; padding: 10px;  }

#pricetable th			{ width: 20%; font-weight: normal; vertical-align: top; }
#pricetable tr
	td:not(:first-child)	{ text-align: center; }

#pricetable tr.prices
	td:not(:first-child)	{ text-align: center; padding: 30px 8px; }
#pricetable tr.prices
	td > span:first-child	{ display: inline-block; margin-top: 4px; vertical-align: top; color: #666; }
#pricetable tr.prices
	td > span:last-child	{ font-size: 2.2em; font-weight: bold; color: #333; vertical-align: top; }
#pricetable thead th > strong	{ font-size: 1.2em; }

#pricetable tr:hover td		{ background-color: #f0f0f0; }
#pricetable svg			{ width: 20px; height: 20px; }
.popular			{ color: #1E90FF; font-weight: bold; font-size: 0.58em; margin-left: 4px; }

.pay-bancontact, .pay-bank, .pay-bitcoin, .pay-giropay, .pay-ideal, .pay-invoice, .pay-maestro, .pay-mastercard, .pay-partialpayments, .pay-paymentoncollect, .pay-paymentondelivery, .pay-paypal, .pay-sofortbanking, .pay-visa { border: 1px solid #ddd; margin: 4px; border-radius: 2px; }
/*--------------------------------
 	Reviews
-------------------------------*/

img.reviewstar			{ padding-right: 5px;  }
.reviewscore			{ font-size: 1.8em; font-weight: bold; color: #666; }
.review, .rreply		{
	padding: 0px 12px; margin: 16px 0 26px 0;
	background: #fff;
	border: 1px solid #ccc; border-radius: 3px;
}
.rreply 			{ margin: -10px 0 30px 40px; border-width: 0 0 0 3px; border-style: solid; border-color: #f90; border-radius: 0; }
span.userrating			{ float: left; }
.review p:first-child		{ padding-bottom: 8px; border-width: 0 0 1px 0; border-style: solid; border-color: #ccc; }
img.tinystar			{ padding-right: 3px; margin-bottom: 6px; }
.review > p:last-child		{ clear: both; }
span.rdate			{ float: right; color: #666; font-size: 0.8em; }
div.examples p			{ font-weight: bold; text-align: right; }

div.examples p > img:first-child	{ float: right; margin-left: 12px; } /* flag */
div.examples img:last-child		{ margin: 20px 0 20px 0; border: 1px solid #ccc; } /* screen */

/*--------------------------------
 	10 Years
-------------------------------*/
.bxl {
	color: #333; background-color: #fff;
	border-width: 1px 1px 1px 0; border-style: solid; border-color: #000;
	display: inline-block; width: 20px; text-align: center;
	font-family: monospace; font-size: 1.2em;
}

.bxl:first-of-type {
	border-width: 1px;
}

.webshops_created {
	font-size: 1.4em; font-weight: bold;
}

/*--------------------------------
 	Symcalia
-------------------------------*/
.restypes			{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; justify-content: space-around; margin: 60px 0 60px 0; text-align: center; }

.restypes > div			{
	display: flex; align-items: flex-end;
	width: 344px; height: 210px; margin: 24px 16px;
	background-repeat: no-repeat; background-position: center; background-size: cover;
	transition: transform .2s;

}
.restypes > div > span		{
	display: inline-block; padding: 6px; margin-top: 190px;
	color: #fff; background-color: rgba(0,0,0,0.6); font-size: 1.2em;
}

.restypes > div:hover		{
	transform: scale(1.2);
}

.symprice > div				{ margin: 0; }
.symprice h2				{ margin-top: 0; }
.symprice .c2				{ display: block; text-align: center; }
.symprice .c2 > div			{ display: inline-block; margin: 20px 0; }
.symprice .c2 > div > span:nth-child(1)	{ display: inline-block; margin-top: 4px; vertical-align: top; color: #666; }
.symprice .c2 > div > span:nth-child(2)	{ font-size: 2.2em; font-weight: bold; color: #444; vertical-align: top; }
.symprice .c2 > div > span:nth-child(3)	{ display: block; }


/*--------------------------------
 	Dark mode
-------------------------------*/
body.dark div.columnbg 			{ background-color: #333; }
body.dark .imgshadow			{ box-shadow: 3px 3px 5px 0px rgba(255, 255, 255, 0.2); }
body.dark .posorder_price		{ color: #eee; }
body.dark #pricetable			{ background: #333; }
body.dark #pricetable,
body.dark #pricetable th,
body.dark #pricetable td		{ border-color: #444; }
body.dark #pricetable tr.prices	td > span:first-child,
body.dark #pricetable tr.prices	td > span:last-child { color: #eee; }
body.dark #pricetable tr:hover td	{ background-color: #555; }
body.dark .symprice .c2 > div > span:nth-child(1),
body.dark .symprice .c2 > div > span:nth-child(2) { color: #eee; }
body.dark .reviewscore			{ color: #eee; }
body.dark .review,
body.dark .rreply			{ background: #333; border-color: #444; }
body.dark .review p:first-child		{ border-color: #666; }
body.dark span.rdate			{ color: #eee; }
body.dark .bxl				{ color: #eee; background-color: #333; }

/*--------------------------------
 	Responsive
-------------------------------*/
@media all and (max-width: 1200px) {
	div.c2 > div, div.c3 > div	{ min-width: auto; }
	.leftbuttons			{ text-align: center; }
	#startimg			{ margin-top: 0; }
	.startform			{ text-align: center; }
	.startform input:first-child	{ margin: 10px; border: 1px solid #CCC; border-radius: 3px; float: none; }
	.startform input:last-child	{ margin: 10px; border-radius: 3px; float: none; }
	div#news > div			{ width: auto; }
	span.rdate			{ display: block; float: none; }
}