body {
	font-family: 'Helvetica Neue', Roboto, sans-serif;
	overflow-x: hidden;
}

p, span, h1, h2, h3, h4 {
	color: #666;
}

h1 {
	font-size: 1.9em;
	color: #444;
}

h2 {
	font-size: 1.5em;
	color: #444;
}

h3 {
	font-size: 1.5em;
	color: #444;
}

p {
	font-size: 1.2em;
	line-height: 1.3em;
	font-weight: 300;
}

a {
	text-decoration: none;
	color: inherit;
}

i {
	font-style: italic;
}

.title {
	font-size: 2em;
	font-weight: 300;
	margin-bottom: 10px;
}

.subtitle {
	font-size: 1.5em;
	font-weight: 300;
}


/* General section */
section {
	display: block;
	position: relative;
	vertical-align: top;
	margin: auto;
	max-width: 1200px;
	height: 500px;
	text-align: center;
	border-top: 1px solid #eee;
	overflow: hidden;
}

/*section:first-of-type {*/
	/*border-top: none !important;*/
/*}*/

section:nth-child(even) {padding-left: 60px}
section:nth-child(odd) {padding-right: 60px}

section .right {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	vertical-align: top;
	text-align: left;
	top: 50%;
	padding-left: 40px;
	width: 48%;
	transform: translateY(-50%);
}

section .left {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	vertical-align: top;
	text-align: right;
	top: 50%;
	padding-right: 40px;
	width: 48%;
	transform: translateY(-50%);
}

section h1, section h2, section p {
	text-align: left;
	margin-bottom: 20px;
}

/* Header section */
header {
	display: block;
	position: fixed;
	z-index: 99;
	box-sizing: border-box;
	width: 100%;
	height: 45px;
	background: rgba(255, 255, 255, 0);
	padding-right: 10px;
	padding-left: 10px;
	color: black;
	/*-webkit-box-shadow: 0 1px 6px 0 #eee;*/
	/*-moz-box-shadow:  0 1px 6px 0 #eee;*/
	/*box-shadow:  0 1px 6px 0 #eee;*/
}

header .right {
	float: right;
}

header a {
	font-size: 0.8em;
	margin-right: 5px;
	margin-left: 5px;
	line-height: 45px;
	cursor: pointer;
}
header a:hover {
	text-decoration: underline;
}

/* Section main */

main {
	text-align: center;
	position: relative;
	padding-top: 80px;
	margin-bottom: 600px;
	height: 720px;
	box-sizing: border-box;
	/*background-image: url(http://zellox.com/wp-content/uploads/2016/04/website-background-images-%E2%80%AB309218135%E2%80%AC-%E2%80%AB%E2%80%AC-1680x1050.jpg);*/
	/*background-position: 100% 0;*/
	/*background-size: auto, auto 100%;*/
	/*background-repeat-y: no-repeat, repeat;*/

}

main .screenshot-main {
	position: relative;
	display: block;
	height: 587px;
	width: 1000px;
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: center;
	margin: auto;
	background-image: url("../static/img/screen.png");
	border-radius: 5px;
	/* box-shadow: 0 14px 12px -10px rgba(0,8,26,0.32); */
	margin-top: 20px;
}

main .description {
	font-size: 1.5em;
	line-height: 1.3em;
	font-weight: 300;
	display: block;
	max-width: 950px;
	margin: auto;
	margin-top: 50px;
}

main .version {
	position: relative;
	border: 1px solid;
	padding: 4px;
	border-radius: 3px;
	font-size: 1.2em;
	font-weight: 400;
	text-transform: uppercase;
	top: -36px;
	right: -130px;
	opacity: 0.9;
}

.download-area {
	display: block;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 1;
	margin-top: 40px;
	margin-bottom: 40px;
}

.download-area > * {
	display: none;
}

.download-area a.button {
	position: relative;
	outline: none;
	height: auto;
	margin-right: 5px;
	margin-left: 5px;
	padding: 0.8em 1.2em;
	padding-left: 40px;
	color: #ffffff;
	line-height: 1.5;
	font-size: 16px;
	font-weight: 400;
	text-shadow: none;
	border-radius: 5px;
	border: none;
	background: #3498db;
	text-decoration: none;
}

.download-area a.line{
	color: #3498db;
	width: 100%;
	margin-top: 10px;
	font-size: 0.9em;
}

.download-area a::before {
	position: absolute;
	left: 10px;
	border-right: 1px solid white;
	background-image: url('../static/img/download_white.png');
	background-size: 20px 21px;
	display: inline-block;
	width: 25px;
	background-repeat: no-repeat;
	height: 25px;
	background-position-y: 2px;
	content: "";
}

.download-area a:hover {
	-webkit-transform: scale(1.01);
	-moz-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-o-transform: scale(1.01);
	transform: scale(1.01);
	cursor: pointer;
}

#particles-js {
	position: absolute;
	width: 100%;
	height: 400px;
	background-color: rgba(0, 0, 0, 0);
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	-webkit-mask-image: radial-gradient(circle at center, rgba(237,237,237,0) 0%, rgba(246,246,246,0.0) 40%, rgba(255,255,255,1) 55%);
	mask-image: radial-gradient(circle at center, rgba(237,237,237,0) 0%, rgba(246,246,246,0.0) 40%, rgba(255,255,255,1) 55%);
}

/* Smart scheduling */
.suggestion-box span:hover {
	background-color: #eee !important;
}

/* Contact */
.contact {
	display: block;
	width: 100%;
	background-color: #fafafa;
	margin-bottom: -40px;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 80px;
}

.contact > * {
	display: inline-block;
	vertical-align: top;
	max-width: 500px;
	margin: auto;
}

.contact .left {
	margin-right: 50px;
	margin-bottom: 30px;
	text-align: left;
}

.contact .left h1 {
	font-size: 2.3em;
	margin-right: 40px;
}

.contact .left p {
	vertical-align: top;
	font-size: 1.2em;
	margin-right: 40px;
}

.contact .feedback-input {
	color: #3c3c3c;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	border-radius: 0;
	line-height: 22px;
	background-color: #fbfbfb;
	padding: 13px 13px 13px 54px;
	margin-bottom: 10px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0.03);
}

.contact #name {
	background-image: url("../static/img/name.svg");
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

.contact #email {
	background-image: url("../static/img/email.svg");
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

.contact #subject {
	background-image: url("../static/img/comment.svg");
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
	margin-bottom: 1px;
}

.contact #comment {
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
	height: 150px;
}

.contact #submit-button {
	-webkit-appearance: none;
	width: 100%;
	border: #fbfbfb solid 4px;
	border-radius: 0px;
	cursor: pointer;
	background-color: #3498db;
	color: white;
	font-size: 24px;
	padding-top: 22px;
	padding-bottom: 22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	margin-top: -4px;
	font-weight: 700;
}

.contact #submit-button:hover {
	background-color: white;
	color: #3498db;
	border-bottom: 5px solid;
}

.contact #mail-ok {
	display: none;
	margin: auto;
	position: relative;
	top: 25px;
	font-size: 2.0em;
	text-align: center;
	font-weight: 100;
	max-width: 400px;
}

/* Footer */
footer {
	background-color: #dcdcdc;
	height: 60px;
	padding: 15px;
	text-align: center;
}

.pre-footer {
	color: #444;
	background-color: #efefef;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	height: auto;
}

footer p {
	margin-bottom: 10px;
	font-size: 0.9em;
}

footer p a {
	position: relative;
	top: 1px;
	font-weight: bold;
}

footer .note {
	font-size: 0.8em;
	margin: 10px;
}

/* Typed-js */
.typed-cursor{
	opacity: 1;
	font-size: 2.5em;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}

/* Terms and privacy pages */
section.terms {
	width: 90%;
	max-width: 800px;
	padding: 0;
	height: auto;
}

section.terms p {
	text-align: justify;
	font-size: 1.2em;
}

section.terms a {
	color: brown;
}

.updated {
	margin-top: 10px;
	margin-bottom: 10px;
	font-style: italic;
	font-size: 1.2em;
}

/*#squares {*/
	/*position: absolute;*/
	/*top: 45px;*/
	/*right: 0;*/
	/*z-index: 0;*/
	/*width: 100%;*/
	/*height: 1122px;*/
	/*opacity: 0.5;*/
	/*background-color: rgba(255, 0, 0, 0.0);*/
	/*background-image: url("");*/
	/*background-repeat: no-repeat;*/
	/*background-size: cover;*/
	/*background-position: 50% 50%;*/
	/*-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0) 0px, rgba(0,0,0,0.0) 500px,  rgba(0,0,0,1) 600px);*/
	/*!*mask-image: radial-gradient(circle at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 600px, rgba(0,0,0,1) 100%);*!*/

/*}*/

#squares {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 100%;
	height: 996px;
	opacity: 0.12;
	background-color: rgba(255, 0, 0, 0.0);
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	/*-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0.0) 0px, rgba(0,0,0,1)672px);*/
	/*-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0) 0px, rgba(0,0,0,0.0) 500px,  rgba(0,0,0,1) 600px);*/
}

/* Indecisive Squares */
.particle {
	background-color: #8c8c8c;
	height: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	z-index: 0;
	transform: rotate(360deg);
	transition: transform 1s, left 1s, top 1s, height 0.5s cubic-bezier(0.325, 0.425, 0.495, 1.00), width 0.5s cubic-bezier(0.325, 0.425, 0.495, 1.00), opacity 1s;
	top: 0;
	width: 0;
}