/*------------------------------
Global Styles
------------------------------*/

* {
	margin: 0;
  	padding: 0;
}

@font-face {
	font-family: "Larsseit Bold";
	src: url("Larsseit-Bold.otf");
}

html,
body {
	height: 100%;
}

html { font-size: 16px; /* Creates a base to calculate EM units. */ }

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	width: 100%;
	color: rgb(244, 244, 250);
}

h1 {
	font-family: 'Larsseit Bold', 'Montserrat', 'Open Sans', sans-serif;
	font-weight: 700;
}

p { font-size: 0.875em; }

input {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: rgb(115, 119, 136);
	outline: none;

}

input:focus { color: rgb(85, 88, 101); }

button {
	border: 0;
	outline: 0;
	background: none;
	cursor: pointer;
}

.frw, .fcw { display: flex; }

.frw, .fcw { flex-wrap: wrap; }

.frw { flex-direction: row; }

.fcw { flex-direction: column; }

.none {display: none;}


/*------------------------------
Page Styles
------------------------------*/

/* DRY Styles */

section#hero,
div#hero--bg-img,
section#hero--bg-cover,
aside#hero--sign-up {
	height: 100%;
}

section#hero--bg-cover header,
section#hero--bg-cover article,
aside#hero--sign-up div {
	width: 80%;
}

section#hero--bg-cover,
aside#hero--sign-up  {
	justify-content: center;
}

aside#hero--sign-up div,
aside#hero--sign-up div p {
	align-self: center;
}

div.logo,
aside#hero--sign-up div input,
aside#hero--sign-up div > button {
	height: 40px;
}

aside#hero--sign-up div > button,
aside#hero--sign-up div p button {
	font-weight: 600;
}

/* END DRY Styles */

section#hero {
	min-height: 100vh;
	width: 100%;
}

div#hero--bg-img {
	background: url('../img/bgImg.jpg') left / cover;
	width: 63.15%;
	height: 100vh;
}

section#hero--bg-cover { background: rgba(61, 61, 74, 0.8); }

div.logo {
	background: url('../img/logo.svg') no-repeat;
	width: 40px;
	margin: 20px 0 0;
}
section#hero--bg-cover article { align-self: center; }

section#hero--bg-cover article h1 { font-size: 3em; margin: 0; }

section#hero--bg-cover article p { font-size: 1.3em; }

aside#hero--sign-up { width: 36.85%; }

aside#hero--sign-up div input {
	border: 1px solid rgb(201, 194, 224);
    background: rgba(250, 250, 253, 0.5);
	margin: 0 0 15px 0;
	padding: 0 15px;
}

form button {
	text-transform: uppercase;
	background: rgb(150, 118, 244);
	color: rgb(244, 244, 250);
	font-size: 1em;
	height: 40px;
}

p.error {
	color: red;
	display: none;
}

aside#hero--sign-up div p {
	color: rgb(115, 119, 136);
	margin: 15px 0 0;
}

aside#hero--sign-up div p button { color: rgb(150, 118, 244); }


/*------------------------------
Media Queries
------------------------------*/

@media screen and (max-width: 699px) {

	div#hero--bg-img,
	aside#hero--sign-up {
		width: 100%;
		flex: 1;
	}

	div#hero--bg-img { height: 60vh; }

	aside#hero--sign-up { height: 40vh; }

}


@media screen and (max-width: 360px) {

	h1 { font-size: 1.25em; }

}