html {
	font-size: 62.5%
}

html,
body {
	height: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	min-width: 720px;
	position: relative;
}

* {
	font-size: 1.6rem;
}

h1,
h2,
h3,
span {
	display: block;
	padding: 10px 20px;
	margin: 0px;
}

h1 {
	text-align: center;
	font-size: 5.5rem;
	font-weight: 100;
}

h2 {
	font-size: 5.5rem;
}

h3 {
	font-size: 2rem;
}

hr {
	border: 0;
	height: 1px;
	background: #CCC;
}

a {
	color: inherit;
	cursor: pointer;
	transition-duration: 0.3s;
	transition-property: all;
}

#start a {
	color: #FF5722;
}

#start a:hover {
	color: #5A5A5A;
}

button {
	margin: 8px;
	border: none;
	border-radius: .3rem;
	display: inline-block;
	height: 4.6rem;
	line-height: 4.6rem;
	font-size: 1.4rem;
	outline: 0;
	padding: 0 2rem;
	text-transform: uppercase;
	vertical-align: middle;
	color: #FFFFFF;
	background: #FF5722;
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	transition-duration: 0.3s;
	transition-property: all;
}

button:hover {
	background: #FF7E4E;
	box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.2)
}

input {
	border: 0;
	outline: 0;
	transition-duration: 0.3s;
	transition-property: all;
	vertical-align: middle;
	cursor: pointer;
	color: #5D5D5D;
	background-color: rgba(256, 256, 256, 0.2);
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.05);
	border-radius: .3rem;
	line-height: 2rem;
	width: 20.0rem;
	padding: 1.3rem 2rem;
	margin: .8rem;
}

input:hover,
input:active,
input:focus {
	background-color: #FFFFFF;
	margin: 0;
	padding: 2.1rem 2.8rem;
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

input::-webkit-input-placeholder {
	color: #FFFFFF;
}

input:hover::-webkit-input-placeholder,
input:active::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
	color: #5D5D5D;
}

input::-moz-placeholder {
	color: #FFFFFF;
}

input:hover::-moz-placeholder,
input:active::-moz-placeholder,
input:focus::-moz-placeholder {
	color: #5D5D5D;
}

input:-moz-placeholder {
	color: #FFFFFF;
}

input:hover:-moz-placeholder,
input:active:-moz-placeholder,
input:focus:-moz-placeholder {
	color: #5D5D5D;
}

input:-ms-input-placeholder {
	color: #FFFFFF;
}

input:hover:-ms-input-placeholder,
input:active:-ms-input-placeholder,
input:focus:-ms-input-placeholder {
	color: #5D5D5D;
}

.clear {
	clear: both;
}

.background-orange {
	background: #FF5722;
	color: #FFFFFF;
}

.background-white {
	background: #FFFFFF;
	color: #FF5722;
}

.background-dark {
	background: #141414;
	color: #FFFFFF;
}

.background-light {
	background: #F5F5F5;
	color: #141414;
}

.float-right {
	display: block;
	float: right;
}

.float-left {
	display: block;
	float: left;
}

.percent25 {
	width: 25%;
}

.percent35 {
	width: 35%;
}

.percent35 {
	width: 35%;
}

.percent33 {
	width: calc(100% / 3);
}

.percent50 {
	width: 50%;
}

.percent65 {
	width: 65%;
}

.percent100 {
	width: 100%;
}

.grid {
	display: block;
	float: left;
}

.shadow-down-high {
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.shadow-down-high-2x {
	box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.25);
}

.shadow-up-high {
	box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.1);
}

.shadow-down-medium {
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.05);
}

.shadow-up-medium {
	box-shadow: 0px -2px 2px 1px rgba(0, 0, 0, 0.05);
}

.shadow-down-high-inverse {
	box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.shadow-up-high-inverse {
	box-shadow: inset 0px -2px 2px 1px rgba(0, 0, 0, 0.1);
}

.transition-none {
	transition-duration: 0s;
	transition-property: all;
}

.transition-fast {
	transition-duration: 0.1s;
	transition-property: all;
}

.transition-normal {
	transition-duration: 0.3s;
	transition-property: all;
}


/*Containers*/

.container {
	margin: 0px auto;
	padding: 0px 20px;
}

.section> .container {
	max-width: 1180px;
	padding: 130px 10px;
}

.feature> .container {
	padding: 25px;
	margin: 30px 10px;
	background: #FFFFFF;
	color: #5A5A5A;
	border-radius: .3rem;
	min-height: 30rem;
}

.plan> .container {
	margin: 30px;
	padding: 30px;
	border: 1px solid #CCC;
	background: #FFFFFF;
	border-radius: .3rem;
	color: #5A5A5A;
}

.comingsoon> .container,
.signup> .container {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	padding: 0px;
	width: 900px;
}


/*Header Bar*/


/*Secondary Bar*/

.filterbar {
	border-bottom: 1px solid #CCCCCC;
	height: 34px;
	padding: 20px 0px 20px 0px;
	max-width: 1600px;
	outline: none;
	margin: auto;
	line-height: 1.6rem;
	transition-duration: 1ms;
	transition-property: all;
}

.filterbar button {
	float: right;
	margin: 0px 1px;
	padding: 3px 0px 0px 0px;
	line-height: 2rem;
	border: none;
	border-bottom: 3px solid #5D5D5D;
	text-decoration: none;
	outline: none;
	color: #5D5D5D;
	background: none;
	text-transform: uppercase;
	background: #EAEAEA;
}

.filterbar button:hover {
	color: #FF5722;
	border-bottom: 3px solid #FF5722;
}

.filterbar a {
	display: block;
	text-decoration: none;
	padding: 15px;
	margin: 0px;
	font-weight: bold;
}

.filterbar a .material-icons {
	float: right;
	line-height: 16px;
	margin-right: -8px;
}

.dropdown {
	float: left;
	margin: 0px 10px;
	outline: none;
	padding-bottom: 10px;
	position: relative;
	transform: 1ms;
}

.dropdown dt {
	color: #5d5d5d;
	padding: 3px 0px 0px 0px;
	margin: 0px 1px;
	text-align: center;
	line-height: 19px;
	text-transform: uppercase;
	border-bottom: 3px solid #5D5D5D;
	background: #EAEAEA;
	transition: color 1ms;
}

.dropdown dt,
.dropdown dt a,
.dropdown dt .material-icons,
.dropdown dd a,
.filterbar button,
.filterbar button a {
	transition: color 1ms;
}

.dropdown dt:hover {
	color: #FF5722;
	border-bottom: 3px solid #FF5722;
}

.dropdown dd {
	position: absolute;
	display: none;
	padding: 12px 0px;
	margin: 5px 0px 0px 0px;
	border-radius: .3rem;
	background: #FFFFFF;
	color: #141414;
	width: 250px;
}

.dropdown dd a:hover {
	color: #FF5722;
	text-decoration: underline;
}

.dropdown ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.feature span {
	padding: 0px;
}

.hide {
	opacity: 0;
}

.show {
	opacity: 1;
}

.main {
	position: relative;
}

.section {
	position: relative;
	width: 100%;
	text-align: center;
}

.section img {
	margin-top: 10px;
	border-radius: .3rem;
}

.section .full-image {
	width: calc(100% - 20px);
}

.section p {
	text-align: center;
	margin: 10px 60px;
}

.site-main .logo {}

.site-main h2 {}

.site-main h1 {
	padding-bottom: 0px;
	font-size: 5rem;
}

.site-main .material-icons {
	font-size: 6rem;
}

.site-main span {
	margin-bottom: -23px;
}

.site-description {
	padding: 0px 0px 50px 0px;
	text-align: center;
	position: absolute;
	bottom: 0px;
	left: 20px;
}

.site-description h2 {
	padding: 10px 0px 0px 0px;
}

.site-description p {
	margin: 0px;
	padding: 10px 10px;
	text-align: center;
}

.site-description img {
	width: 128px;
}

.site-featured-image {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.site-featured-image img {
	width: calc(100% - 60px);
	padding: 0px 20px 0px 40px;
}

.header button:last-of-type {
	margin-right: 20px;
}

.background-orange button {
	background: #E0E0E0;
	color: #6B6B6B;
}

.background-orange button:hover {
	background: #FFFFFF;
	color: #4E4E4E;
}

.feature {
	text-align: center;
}

.feature h2 {
	height: 50px;
}

.feature span.material-icons {
	color: #FF5722;
	display: block;
	font-size: 8rem;
	margin: 20px;
}

.noads {
	font-size: 15rem;
	padding: 15px;
	color: #FF5722;
}

.plan {
	text-align: center;
}

.plan h1 {
	border-bottom: none;
}

.plan h2 {
	color: #FF5722;
}

.major-heading {
	background: #FFF;
}

.major-heading h1 {
	font-size: 10rem;
	border: none;
	margin: 0px;
	padding: 60px 0px;
	color: #141414;
}

.signup {
	background: #5A5A5A;
	color: #FFF;
	height: 100%;
}

.section.background-light:not(:first-child) {
	border-top: 1px solid #CCC;
}

.full-height {
	height: 100%;
}

.signup span {
	padding: 0;
}

/* For mobile devices */

@media only screen and (max-device-width: 500px) {
	html {
		font-size: 150%;
	}
	h1,
	h2 {
		font-size: 3.5rem;
	}
	.section> .container {
		height: 100%;
		padding: 6rem 2rem;
	}
	.feature> .container {
		border-radius: .3rem;
		min-height: auto;
		height: 100%
	}
	.feature span:last-of-type {
		padding-bottom: 2rem;
	}
	.logo{
		content: url("/resources/images/logo_256-white.png");
	}
	.comingsoon> .container,
	.signup> .container {
		height: initial;
		padding: 0px;
	}
	.percent25 {
		width: 100%;
	}
	.percent35 {
		width: 100%;
	}
	.percent35 {
		width: 100%;
	}
	.percent33 {
		width: 100%;
	}
	.percent50 {
		width: 100%;
	}
	.percent65 {
		width: 100%;
	}
	.percent100 {
		width: 100%;
	}
}