@font-face {
	font-family: 'Droid Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../font/DroidSans-Regular.eot?1516549146');
	src: local('Droid Sans Regular'),
		local('DroidSans-Regular'),
		url('../font/DroidSans-Regular.eot?1516549146#iefix') format('embedded-opentype'),
		url('../font/DroidSans-Regular.woff2?1516549146') format('woff2'),
		url('../font/DroidSans-Regular.woff?1516549146') format('woff'),
		url('../font/DroidSans-Regular.ttf?1516549146') format('truetype'),
		url('../font/DroidSans-Regular.svg?1516549146#droid_sansregular') format('svg');
}

@font-face {
	font-family: 'Droid Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../font/DroidSans-Bold.eot?1516549146');
	src: local('Droid Sans Bold'),
		local('DroidSans-Bold'),
		url('../font/DroidSans-Bold.eot?1516549146#iefix') format('embedded-opentype'),
		url('../font/DroidSans-Bold.woff2?1516549146') format('woff2'),
		url('../font/DroidSans-Bold.woff?1516549146') format('woff'),
		url('../font/DroidSans-Bold.ttf?1516549146') format('truetype'),
		url('../font/DroidSans-Bold.svg?1516549146#droid_sansbold') format('svg');
}

@font-face {
	font-family: 'Droid Sans Mono';
	font-style: normal;
	font-weight: 400;
	src: url('../font/DroidSansMono-Regular.eot?1516549146');
	src: local('Droid Sans Mono Regular'),
		local('DroidSansMono-Regular'),
		url('../font/DroidSansMono-Regular.eot?1516549146#iefix') format('embedded-opentype'),
		url('../font/DroidSansMono-Regular.woff2?1516549146') format('woff2'),
		url('../font/DroidSansMono-Regular.woff?1516549146') format('woff'),
		url('../font/DroidSansMono-Regular.ttf?1516549146') format('truetype'),
		url('../font/DroidSansMono-Regular.svg?1516549146#droid_sans_monoregular') format('svg');
}

* {
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0
}

.hidden {
	display: none!important
}

body,html {
	font-size: 16px;
	height: 100%;
	background: #333;
	font-family: 'Droid Sans',sans-serif;
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	line-height: 1.6
}

footer,header {
	flex: 0 0 auto
}

#main {
	flex: 1 0 auto;
	padding: 1em 0
}

.container {
	display: block;
	width: 95%;
	margin: 0 auto
}

#main .container {
	overflow-x: auto;
	overflow: hidden
}

#main .main-left,#main .main-right {
	background: #fff;
	margin: .5em 1%;
	border-radius: 12px;
	float: left;
	overflow: hidden;
	padding: 2em 3%;
	width: 60%
}

#main .main-right {
	float: right;
	width: 35%
}

a,button.buy-button {
	text-decoration: none;
	transition-duration: .3s
}

button.buy-button {
	background-color: #fff;
	border-radius: 8px;
	border: 2px solid #399;
	padding: 16px 32px;
	font-size: 1em;
	color: #000
}

button.buy-button:hover {
	background-color: #399;
	color: #fff
}

header h1 {
	font-family: 'Droid Sans Mono',monospace;
	font-size: 4em;
	letter-spacing: -5px;
	margin: 0 0 -1rem
}

header h1 a,header h1 a:hover {
	color: #fff;
	transition: none
}

header h2 {
	font-size: 1.2em;
	font-weight: 400;
	margin: 10px;
	color: #ccc
}

footer p, header h2, nav {
    text-align: center
}

nav,button.buy-button {
	display: inline-block
}

nav a {
	padding: .5em;
	margin: 0 .5em;
	border-radius: 8px;
	color: #999
}

nav a:hover {
	color: #fff;
	background: #399
}

header>.container:after {
	content: '';
	display: block;
	clear: both
}

footer {
	background: #666
}

footer,#footer a {
	color: #ccc
}

footer a:hover {
	color: #fff
}

footer p {
	margin: 0;
	padding: 1em 0
}

@media (max-width:767px) {
	#main .main-left,#main .main-right {
		float: none;
		width: 97.5%
	}

	#main,#nav ul li a {
		padding: .5em 0
	}

	header h1 {
		float: none
	}

	#footer p {
		padding: 1em 0
	}
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9;
	display: block;
	margin-left: auto;
	margin-right: auto
}

li,p,td,th {
	text-align: justify;
	overflow-wrap: break-word;
	word-wrap: break-word
}

blockquote,hr,p,ul {
	margin-bottom: 1em
}

a {
	color: #399
}

a:hover,body {
	color: #333
}

h1,h2,h3,h4,h5 {
	margin-bottom: .6em;
	font-weight: 700;
	color: #333
}

blockquote,h6 {
	font-style: italic
}

h1,h2 {
	font-size: 2rem;
	text-align: center
}

h2 {
	font-size: 1.7rem
}

h3 {
	font-size: 1.4rem
}

h4 {
	font-size: 1.1rem;
	letter-spacing: 1px;
	text-transform: uppercase
}

h5,h6 {
	font-size: 1rem
}

h6 {
	margin-bottom: .6em;
	color: #333;
	font-weight: 400
}

hr {
	border: .15em solid #ccc;
	border-radius: .3em;
	background: #ccc
}

ul {
	list-style-position: outside;
	padding-left: 1.5em;
	overflow: hidden
}

li {
	padding-left: .5em;
	float: left;
	width: 50%;
	min-width: 280px
}

blockquote {
	margin-left: 1em;
	padding-left: 1em;
	border-left: .5em solid #eee
}

button::-moz-focus-inner,input::-moz-focus-inner {
	border: 0;
	padding: 0
}

#google_translate_element {
    text-align: center;
    display: block;
    margin: 1em;
}

#google_translate_element img {
    display: inline-block;
    margin: 3px;
}

#google_translate_element select {
    border-radius: 4px;
    border: 2px #399 solid;
    padding: 0.5em;
}


.p01-contact * {
	box-sizing: border-box
}

.p01-contact {
	margin: 1em auto;
	max-width: 26em
}

.p01-contact .field {
	margin-top: .5em
}

.p01-contact .field.inline {
	margin-top: 1em
}

.p01-contact label {
	display: block;
	font-weight: 400
}

.p01-contact label .description {
	font-size: .875em;
	color: #666;
	float: right
}

.p01-contact input:not([type=radio]):not([type=checkbox]),.p01-contact select,.p01-contact textarea {
	border: 1px solid #999;
	padding: 7px;
	margin: 0;
	transition: all .3s ease-in-out;
	outline: 0;
	width: 100%
}

.p01-contact input:focus,.p01-contact select:focus,.p01-contact textarea:focus {
	box-shadow: 0 0 8px #8de;
	border: 1px solid #6cc
}

.p01-contact input[type=button]:not([type=radio]):not([type=checkbox]),.p01-contact input[type=submit]:not([type=radio]):not([type=checkbox]) {
	background: #399;
	padding: 8px 15px;
	margin: 1em 0;
	border: 0;
	color: #fff
}

.p01-contact input[type=button]:hover,.p01-contact input[type=submit]:hover {
	background: #39c;
	box-shadow: none
}

.p01-contact .required label:after {
	content: ' *';
	color: #399;
	font-weight: 700
}

.p01-contact input[type=checkbox],.p01-contact input[type=radio] {
	vertical-align: middle
}

.p01-contact :not(.inline) .options {
	display: flex;
	border: 1px solid #ddd;
	padding: .5em
}

.p01-contact :not(.inline) .options .option {
	margin: 0 1em
}

.p01-contact .options input {
	display: inline-block;
	margin-right: .5em
}

.p01-contact .error-msg {
	color: red;
	font-size: .85em;
	margin-left: .5em
}

input:invalid,textarea:invalid {
	box-shadow: none
}

.p01-contact .alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px
}

.p01-contact .alert.success {
	color: #363;
	background-color: #cfc;
	border-color: #ccc
}

.p01-contact .alert.failed {
	color: #933;
	background-color: #fcc;
	border-color: #ccf
}