@font-face {
	font-family: 'Titillium Web';
	font-style: normal;
	font-weight: 400;
	src: local('Titillium Web'), local('TitilliumWeb-Regular'),
		url(../fonts/TitilliumWeb-Regular.ttf) format('truetype'),
		url(../fonts/TitilliumWeb-Regular.woff) format('woff');
}
@font-face {
	font-family: 'Titillium Web';
	font-style: italic;
	font-weight: 200;
	src: local('Titillium WebThin Italic'), local('TitilliumWeb-ThinItalic'),
		url(../fonts/TitilliumWeb-ThinItalic.ttf) format('truetype'),
		url(../fonts/TitilliumWeb-ThinItalic.woff) format('woff');
}
@font-face {
	font-family: 'Titillium Web';
	font-style: normal;
	font-weight: 700;
	src: local('Titillium WebBold'), local('TitilliumWeb-Bold'),
		url(../fonts/TitilliumWeb-Bold.ttf) format('truetype'),
		url(../fonts/TitilliumWeb-Bold.woff) format('woff');
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "Titillium Web", sans-serif;
	font-weight: 400;
}
b {
	font-family: "Titillium WebBold", sans-serif;
}
#header {
	color: #eff;
	background-color: #046;
	background: -webkit-radial-gradient(#069, #046);
	background: -o-radial-gradient(#069, #046);
	background: -moz-radial-gradient(#069, #046);
	background: radial-gradient(#069, #046);
	min-height: 5em;
	padding: 0 2em;
}
body > div {
	padding: 1em 2em;
}
#content, #header > div, #footer > div {
	max-width: 1000px;
	margin: 0 auto;
	clear: both;
}
a {
	text-decoration: none;
	color: #07a;
}
a, input.button, label {
	cursor: pointer;
}
#header a {
	color: white;
	border: 1px solid transparent;
	transition: border .2s;
}
#header .nav ul a.active {
	border-bottom: 2px solid #2ac;
}
#header .nav ul a:hover {
	border: 1px solid #2ac;
}
#footer {
	color: #999;
	clear: both;
	padding: 2em 2em 1em 2em;
	font-size: .8em;
}
h1, h2, h3, h4, h5 {
	font-weight: 300;
}
h1, h2 {
	color: #069;
}
.nav h1, .nav h2, .nav h3, .nav h4, .nav h5 {
	float: left;
	margin-bottom: 0;
}
#header .nav h1, #header .nav h2 {
	font-size: 1.9em;
	margin: .5em 0 0 0;
}
#header .nav ul {
	margin-top: 1.4em;
}
#header .nav h1 {
	color: white;
}
#header .nav h2, #header .nav h2 a {
	color: #9cd;
	margin-left: .2em;
}
#footer ul, #footer h5 {
	margin: 0;
	padding: 0;
}
.nav ul {
	display: block;
	float: right;
	list-style: none;
	padding: 0;
}
.nav ul li {
	display: block;
	float: left;
}
.nav ul li a {
	padding: .4em .8em;
	border-radius: .8em;
}
.nav ul li.buy a  {
	background-color: #069;
}
@media screen and (max-width: 600px) {
	#header .nav h1, #header .nav h2 {
		font-size: 1.5em;
	}
	#header .nav ul li {
		font-size: .8em;
	}
}
#slides, #slide1, #slide2, #slide3, #slide4 {
	width: 900px;
	height: 550px;
}
#slide1, #slide2, #slide3, #slide4 {
	margin-top: -20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center 50px;
	position: absolute;
}
#slides h4 {
	font-size: 1.5em;
	text-align: center;
	color: #cff;
	font-style: italic;
	font-weight: 200;
}
#slide2, #slide3, #slide4 {
	 opacity: 0;
	 /* IE10 and below */
	 _display: none;
	 *display: none;
	  display: none \ ;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* IE10 and above */
	#slide2, #slide3, #slide4 {
		display: block;
	}
}
@media screen and (max-width: 950px) {
	#slides, #slide1, #slide2, #slide3, #slide4 {
		width: 600px;
		height: 360px;
	}
	#slides h1 { font-size: 1.7em; }
}
@media screen and (max-width: 650px) {
	#slides, #slide1, #slide2, #slide3, #slide4 {
		width: 450px;
		height: 280px;
	}
}
@media screen and (max-width: 500px) {
	#slides, #slide1, #slide2, #slide3, #slide4 {
		width: 320px;
		height: 240px;
	}
}
@media screen and (max-width: 370px) {
	#slides, #slide1, #slide2, #slide3, #slide4 {
		width: 240px;
		height: 180px;
	}
	#slides h1 { font-size: 1.2em; }
	#header {
		padding: 0 1em;
	}
	body > div, #footer {
		padding: 1em;
	}
}
@-webkit-keyframes slideshow {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	24%  { opacity: 1; }
	29%  { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes slideshow {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	24%  { opacity: 1; }
	29%  { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes slideshow {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	24%  { opacity: 1; }
	29%  { opacity: 0; }
	100% { opacity: 0; }
}
#slide1 {
	background-image: url(images/sshot1.png);
	-webkit-animation: slideshow 16s 0s infinite;
	-moz-animation: slideshow 16s 0s infinite;
	animation: slideshow 16s 0s infinite;
}
#slide2 {
	background-image: url(images/sshot2.png);
	-webkit-animation: slideshow 16s 4s infinite;
	-moz-animation: slideshow 16s 4s infinite;
	animation: slideshow 16s 4s infinite;
}
#slide3 {
	background-image: url(images/sshot3.png);
	-webkit-animation: slideshow 16s 8s infinite;
	-moz-animation: slideshow 16s 8s infinite;
	animation: slideshow 16s 8s infinite;
}
#slide4 {
	background-image: url(images/sshot4.png);
	-webkit-animation: slideshow 16s 12s infinite;
	-moz-animation: slideshow 16s 12s infinite;
	animation: slideshow 16s 12s infinite;
}
#slide1, #slide2, #slide3, #slide4 {
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	animation-fill-mode: both;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#slide1 { background-image: url(images/sshot1@2x.png); }
	#slide2 { background-image: url(images/sshot2@2x.png); }
	#slide3 { background-image: url(images/sshot3@2x.png); }
	#slide4 { background-image: url(images/sshot4@2x.png); }
}
.small {
	font-size: .8em;
}
.left {
	float: left;
	clear: left;
}
.right {
	float: right;
	clear: right;
}
.block {
	width: 48%;
}
.block.left.third {
	width: 33%;
}
.block.right.third {
	width: 63%;
}
h2.block {
	margin-top: 2em;
}
.clear {
	clear: both;
}
.block ul {
	list-style: none;
	padding: 0;
}
.block ul li {
	margin: 0;
	padding: 0;
	padding-left: 1em;
}
.block ul li:before {
	display: block;
	position: relative;
	top: 1em;
	left: -.7em;
	content: "";
	width: .3em;
	height: .3em;
	background-color: #9df;
	border-radius: 50%;
}
.center {
	text-align: center;
}

@media screen and (max-width: 800px) {
	.block {
		float: none;
		clear: both;
		width: 100%;
	}
}
#download {
	text-align: center;
	padding-bottom: 2em;
}
#download a,
li.download.button a,
input.button {
	color: white;
	font-size: 1.2em;
	padding: .5em 1em;
	border-radius: 1em;
	background-color: #069;
	border: none;
}
#download a,
li.download.button a {
	padding: .5em 1em .5em 2.5em;
	background-image: url(images/download.png);
	background-repeat: no-repeat;
	background-position: 10px center;
}
.block ul li.download.button:before {
	display: none;
}
.block ul li.download.button a {
	display: inline;
	display: inline-block;
	background-color: #07a;
}
.block ul li.download.button a:hover {
	background-color: #09c;
}
.block ul li.download.button small {
	display: block;
	padding: 0 1em;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#download a,
	li.download.button a {
		background-image: url(images/download@2x.png);
		background-size: 32px 32px;
	}
}
.icon {
	background-repeat: no-repeat;
	background-size: 18px 18px;
}
h3.icon {
	display: inline;
	padding-right: 32px;
	background-position: right center;
}
a.icon {
	padding-right: 22px;
	background-position: right center;
}
label.icon {
	padding-left: 20px;
}
.block ul li.icon {
	padding-left: 32px;
}
.block ul li.icon:before {
	background-color: transparent;
}
li.icon {
	background-position: 8px 8px;
}
.colored {
	background-color: #f0f9ff;
	border-radius: 1em;
}
div.colored {
	padding: .2em 2em;
}
.icon.image    { background-image: url(images/icon-image.png); }
.icon.vector   { background-image: url(images/icon-vector.png); }
.icon.browse   { background-image: url(images/icon-browse.png); }
.icon.text     { background-image: url(images/icon-text.png); }
.icon.internet { background-image: url(images/icon-internet.png); }
.icon.windows  { background-image: url(images/icon-windows.png); }
.icon.apple    { background-image: url(images/icon-apple.png); }
.icon.download { background-image: url(images/icon-download.png); }
.icon.link     { background-image: url(images/icon-link.png); }
.icon.uk       { background-image: url(images/icon-uk.png); }
.icon.it       { background-image: url(images/icon-italy.png); }
.icon.de       { background-image: url(images/icon-germany.png); }
.icon.fr       { background-image: url(images/icon-france.png); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.icon.image    { background-image: url(images/icon-image@2x.png); }
    .icon.vector   { background-image: url(images/icon-vector@2x.png); }
	.icon.browse   { background-image: url(images/icon-browse@2x.png); }
	.icon.text     { background-image: url(images/icon-text@2x.png); }
	.icon.internet { background-image: url(images/icon-internet@2x.png); }
	.icon.windows  { background-image: url(images/icon-windows@2x.png); }
	.icon.apple    { background-image: url(images/icon-apple@2x.png); }
	.icon.download { background-image: url(images/icon-download@2x.png); }
	.icon.link     { background-image: url(images/icon-link@2x.png); }
	.icon.uk       { background-image: url(images/icon-uk@2x.png); }
	.icon.it       { background-image: url(images/icon-italy@2x.png); }
	.icon.de       { background-image: url(images/icon-germany@2x.png); }
	.icon.fr       { background-image: url(images/icon-france@2x.png); }
}

.order-form {
	max-width: 500px;
}

.order-form-headline {
	font-weight: bold;
}

.order-form-group {
	margin: 12px 0px 12px 0px;
}

.order-form label {
	margin: 0px 12px 15px 0px;
}
.order-form label > span {
	width: 150px;
	float: left;
	padding-top: 2px;
	padding-right: 5px;
}
.order-form span.required {
	color:red;
}
.order-form input.input-field {
	width: 48%;
}
.order-form input.input-field,
.order-form .textarea-field{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid #c2c2c2;
	box-shadow: 1px 1px 4px #ebebeb;
	-moz-box-shadow: 1px 1px 4px #ebebeb;
	-webkit-box-shadow: 1px 1px 4px #ebebeb;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 7px;
	outline: none;
}
.order-form .input-field:focus,
.order-form .textarea-field:focus {
	border: 1px solid #069;
}
.order-form .textarea-field {
	height: 100px;
	width: 55%;
}

.order-form .payment-radio-buttons {
	padding: 32px 0;
}

.order-form .payment-radio-button {
	display: block;
	padding: 16px 0;
}

.order-form .payment-radio-button:first-child {
	padding: 0;
}

.order-form #complete-bank-transfer {
	display: none;
}

/* Form */
.form-style-2 {
	max-width: 500px;
	font-size: .92em;
}
.form-style-2 label {
	margin: 0px 12px 15px 0px;
}
.form-style-2 label > span {
	width: 150px;
	font-weight: bold;
	clear: left;
	float: left;
	padding-top: 8px;
	padding-right: 5px;
}
.form-style-2 span.required {
	color:red;
}
.form-style-2 input.input-field {
	width: 48%;
}
.form-style-2 input.input-field,
.form-style-2 .textarea-field{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid #c2c2c2;
	box-shadow: 1px 1px 4px #ebebeb;
	-moz-box-shadow: 1px 1px 4px #ebebeb;
	-webkit-box-shadow: 1px 1px 4px #ebebeb;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 7px;
	outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .textarea-field:focus {
	border: 1px solid #069;
}
.form-style-2 .textarea-field {
	height: 100px;
	width: 55%;
}
