/*
Theme Name: Steemauto
Theme URI: http://steemauto.com/
Description: Custom theme for Steemauto website
Version: 0.1
Author: Vitaly Kolesnik
Author URI: http://dancingwater.eu/
*/

/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video  { 
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
menu, ol, ul {
	list-style: none;
}
mark {
	background-color: transparent;
}

/* layout */
body {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.414;
	background-color: #2560b0;
	background-image: url('i/sa-bg.png');
	background-position: center top;
	background-repeat: repeat-x;
}

.head {
	padding: 2.5rem 0;
}
.head menu li {
	display: inline-block;
	margin-right: 1em;
}
.head menu li:last-of-type {
	margin-right: 0;
}
.head a {
	color: white;
	text-decoration: none;
}
.head .logo {
	display: inline-block;
	margin-right: 1.5rem;
	font-weight: 900;
	font-size: 1.75rem;
	color: white;
}
.head .tagline {
	display: inline-block;
	font-weight: 300;
	color: white;
}
.user {
	text-align: right;
	position: relative;
	top: 0.5rem;
}
.user .button {
    display: block;
    padding: 0.5rem 1rem;
}

.neck {
	padding: 1.5rem 0 0 0;
}
.welcome {
	float: left;
	width: 70%;
	font-size: 2.1875rem;
	font-weight: 300;
	line-height: 1.3;
	color: white;
}
.welcome .button {
    display: inline-block;
    margin-top: 1rem;
}
.intro .visual {
	float: left;
	width: 30%;
	text-align: right;
}
.intro .visual .fa {
	color: #4a7fc7;
	font-size: 10rem;
}
.video .visual {
	position: relative;
	top: -1rem;
	text-align: right;
}

.belly {
	padding: 2.5rem 0 2rem 0;
	background-color: white;
}
.features .icon {
	width: 7rem;
	height: 7rem;
	margin: 0 2rem 2rem 0;
	float: left;
	color: white;
	background-color: #a7dcfa;
	border-radius: 3.5rem;
	text-align: center;
}
.features .icon i {
	display: inline-block;
	padding-top: 1rem;
	font-size: 5rem;
}
.features .text {
	width: calc(100% - 9rem);
	float: left;
}
.features .text h3 {
	margin: 0.5rem 0;
	font-weight: 900;
	font-size: 1.5rem;
}
.features .text p {
	font-weight: 300;
	font-size: 1.125rem;
}
.features .cta {
	text-align: center;
}
.feet {
	padding: 2.5em 0;
	background-color: #767575;
	color: white;
	font-weight: 300;	
	font-size: 0.875rem;
}
.feet .links i {
	color: black;
	font-size: 2.625rem;
	vertical-align: middle;
	padding-bottom: 0.2rem;
}
.feet .links a {
	display: inline-block;
	margin-top: -0.5rem;
	padding: 0 1rem 0 0.5rem;
	color: black;
	text-decoration: none;
}
.feet .link {
	display: inline-block;
}
.feet .links .discord {
	width: 2.625rem;
	height: auto;
	vertical-align: middle;
}
.feet .credits {
	margin-top: 0.75rem;
}
.feet .credits a {
	color: white;
}

/* common elements */

.group:after { /* new clearfix */
  content: "";
  display: table;
  clear: both;
}
.max {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 40px;
}
.half {
	width: 50%;
	float: left;
}
.fourth {
	width: 25%;
	float: left;
}

/* forms */

.button {
	font-size: 1rem;
    font-weight: 400;
    display: inline-block;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 0.875rem 1.625rem;
    border: 2px solid white;
	color: white;
    background-color: #38c0ed;
    transition: all .1s;
    text-transform: uppercase;
	line-height: 1.25;
	text-align: center;
}
.button.trans {
	background-color: transparent;
}

@media (min-width: 320px) and (max-width: 599px) {
	body {
		background-position: 25% top;
	}
	.max {
		padding: 0 1rem;
	}
	.head {
		padding: 2.5rem 0 2.5rem 0;
	}
	.head .logo {
		margin-right: 1.125rem;
		font-size: 1rem;
	}
	.head .tagline {
		font-size: 0.875rem;
	}
	.user {
	    top: 0.25rem;
	}
	menu li:last-of-type {
		display: none;
	}
	.user .button {
		font-size: 0.75rem;
	    padding: 0.5rem;
	}
	.neck {
		padding: 0;
	}
	.welcome {
		float: none;
		width: 100%;
		font-size: 1.125rem;
	}
	.welcome .button {
		display: none;
	}
	.intro .visual {
		display: none;
	}
	.video .visual {
		top: 0;
		margin: 1rem 0;
		width: 100%;
	}
	.video .visual img {
		width: 100%;
		height: auto;
	}
	.features .icon {
		width: 3rem;
		height: 3rem;
		margin: 0 1rem 1rem 0;
		border-radius: 1.5rem;
	}
	.features .icon i {
		padding-top: 0.5rem;
		font-size: 2rem;
	}
	.features .text {
		width: calc(100% - 4rem);
		float: left;
	}
	.feature {
		margin-bottom: 1rem;
	}
	.features .cta {
		text-align: left;
	}
	.feet .links i {
		width: 2.625rem;
		height: auto;
	}
	.feet .credits {
		margin-top: 0.5rem;
	}
}
@media (min-width: 420px) and (max-width: 599px) {
	.max {
		padding: 0 2rem;
	}
	.head .logo {
		margin-right: 1rem;
		font-size: 1.5rem;
	}
	.head .tagline {
		font-size: 0.875rem;
	}
	.user .button {
		font-size: 0.875rem;
	    padding: 0.5rem 1rem;
	}
}
@media (min-width: 600px) and (max-width: 1023px) {
	.max {
		padding: 0 3rem;
	}
	.head {
		padding: 2.5rem 0 2.5rem 0;
	}
	.head .logo {
		margin-right: 1.5rem;
		font-size: 2rem;
	}
	.head .tagline {
		position: relative;
		top: -0.25rem;
		font-size: 1rem;
	}
	.user {
	    top: 0.75rem;
	}
	.user .button {
		font-size: 0.875rem;
	    padding: 0.5rem 1 rem;
	}
	.neck {
		padding: 0;
	}
	.intro {
		float: left;
		width: 50%;
	}
	.welcome {
		float: none;
		width: 100%;
		font-size: 1.125rem;
		padding-bottom: 2rem;
	}
	.welcome .button {
		display: none;
	}
	.intro .visual {
		display: none;
	}
	.video {
		float: right;
		width: 44%;
	}
	.video .visual {
		top: 0;
		margin: 0 0 2rem 0;
		width: 100%;
	}
	.video .visual img {
		width: 100%;
		height: auto;
	}
	.features .icon {
		width: 3rem;
		height: 3rem;
		margin: 0 1rem 1rem 0;
		border-radius: 1.5rem;
	}
	.features .icon i {
		padding-top: 0.5rem;
		font-size: 2rem;
	}
	.features .text {
		width: calc(100% - 4rem);
		float: left;
	}
	.feature {
		margin-bottom: 1rem;
	}
	.features .cta {
		margin-top: 1rem;
		text-align: left;
	}
	.feet .links i {
		width: 2.625rem;
		height: auto;
	}
	.feet .credits {
		margin-top: 0.5rem;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.welcome {
		font-size: 1.25rem;
	}
	.welcome .button {
		display: inline-block;
		margin-top: 1.5rem;
	}
	.video .visual {
		margin: 0 0 3rem 0;
	}
	.features .icon {
		width: 5rem;
		height: 5rem;
		margin: 0 1.5rem 1.5rem 0;
		border-radius: 2.5rem;
	}
	.features .icon i {
		padding-top: 1rem;
		font-size: 3rem;
	}
	.features .text {
		width: calc(100% - 6.5rem);
		float: left;
	}
}