body {
font-family: 'Roboto', sans-serif;
line-height: 20px;
font-size: 16px;
}

body, div, ul, li, h1, h2, h3, h4, p, blockquote {
margin: 0;
padding: 0;
}

#baseline {
position: absolute;
width: 100%;
height: 200%;
/*background: url(baseline-5px.png);*/
z-index: 50;
opacity: 0.1;
}

#container {
margin: 0 auto;
padding: 100px 0 50px 0;
max-width: 600px;
}

/* TYPE */

h1 {
font-size: 32px;
line-height: 40px;
margin: 10px 0 15px 0;
}
	h1 span {
	position: relative;
	top: -1px;
	}

h2 {
font-size: 24px;
line-height: 30px;
margin: 10px 0 15px 0;
font-weight: 400;
}
	h2 span {
	position: relative;
	top: 2px;
	}

p {
font-size: 16px;
line-height: 25px;
margin: 10px 0 20px 0;
}
	p span {
	position: relative;
	top: 2px;
	}

ul, ol {
font-size: 16px;
line-height: 25px;
margin: 10px 0 30px 0;
}
li {
margin: 0 0 5px 0;
}
	ul, ol {
	position: relative;
	top: 2px;
	}



.blockquote {
font-size: 16px;
line-height: 25px;
margin: 10px 0 25px 0;
font-style: italic;
	border-left: 3px solid rgba(0,0,0,0.8);
    padding-left: 20px;
    margin-left: -23px;
}
	.blockquote span {
	position: relative;
	top: 2px;
	}

.pullquote {
font-size: 21px;
line-height: 30px;
margin: 10px 0 25px 0;
font-style: italic;
font-weight: 300;
padding-left: 50px;
}
	.pullquote span {
	position: relative;
	top: 3px;
	}


/* ---------- */ 
/*   CUSTOM   */
/* ---------- */

a {
color: inherit;
text-decoration: none;
transition: color 0.10s linear;
}
a:hover {
}

.button {
margin: -5px 0 25px 0;
}
.form .button {
margin: 10px 0 25px 0;
}

.button a {
padding: 10px 20px;
display: inline-block;
margin: 10px 0;
border-radius: 3px;
border: none;
transition: background 0.10s linear;
}
.button a:hover {
}

#logo {
font-size: 48px;
}

ol {
padding-left: 17px;
}

.form {
margin: -5px 0 25px 0;
margin: -5px 0 -10px 0;
margin: 0 0 -5px 0;
}
.form .input-text {
width: 250px;
border: 1px solid #aaa;
padding: 8px;
background: #fff;
border-radius: 3px;
font-size: inherit;
font-family: inherit;
color: #444;
}
.form .input-button {
border: 1px solid #aaa;
border-radius: 3px;
background: #ddd;
font-size: inherit;
font-family: inherit;
padding: 8px 16px;
color: #444;
cursor: pointer;
}
#mc_embed_signup_scroll div {
display: inline;
}


/* ------------- */ 
/*   EXTENSION   */
/* ------------- */


.extension #container {
margin: auto;
padding: 15px 25px;
width: auto;
}

textarea {
width: 500px;
height: 125px;
border: none;
border: 1px solid #ccc;
border-radius: 3px;
font-family: inherit;
font-size: inherit;
font-size: 14px;
line-height: 20px;
padding: 6px 8px;
color: rgba(0,0,0,0.75);
font-family: monospace;
opacity: 0.9;
}

input:focus, textarea:focus {
outline: none;
}


.extension h1 {
	font-size: 24px;
	line-height: 30px;
	margin: 10px 0 15px 0;
}
.extension h2 {
	font-size: 16px;
	line-height: 25px;
	margin: -5px 0 15px 0;
}
.extension p {
	font-size: 14px;
	line-height: 25px;
	margin: 10px 0 15px 0;
}


button {
-webkit-padding-end: 10px;
-webkit-padding-start: 10px;
min-height: 2em;
min-width: 4em;
-webkit-appearance: none;
-webkit-user-select: none;
background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
color: #444;
font: inherit;
margin: 0 1px 0 0;
outline: none;
text-shadow: 0 1px 0 rgb(240, 240, 240);
align-items: flex-start;
text-align: center;
cursor: default;
padding: 3px 10px 2px 10px;
background-color: buttonface;
box-sizing: border-box;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
display: inline-block;
-webkit-writing-mode: horizontal-tb;
}

button span {
top: 0;
}

button:hover {
cursor: pointer;
}

:disabled:-webkit-any( button, input[type='button'], input[type='submit']):not(.custom-appearance), select:disabled {
background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
border-color: rgba(80, 80, 80, 0.2);
box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
color: #aaa;
}


.extension {
background: #eee;
color: #333;
}

.extension a {
color: inherit;
border-bottom: 1px solid #aaa;
}
.extension a:hover {
color: inherit;
border-bottom: 1px solid #aaa;
}
.extension h2 {
color: #777;
}


i {
font-style: normal;
color: #bbb;
padding: 0 3px;
}

.extension .footer * {
/*color: #777;*/
}
.extension .footer i {
color: #bbb;
}

img#screen {
max-width: 480px;
margin: 10px 0;

-webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.25);
}


/* ------------ */ 
/*    MOBILE    */
/* ------------ */

@media only screen and (min-width : 0px) and (max-width : 1024px) {

	html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	}
	#container {
	margin: 0 auto;
	padding: 50px 15px;
	}
	img#screen {
	max-width: 100%;
	}
	.form .button {
	margin: 10px 0 25px 0;
	}



}



/* ----------- */ 
/*    COLOR    */
/* ----------- */

body {
color: rgba(255,255,255,1.0);
background: #6640ba;
background: #4c68cd; /* -30 +10 +10 */
background: #3e59c0; /* -30   0   0 */
background: #455eb9; /* -30 -10   0 */
background: #476cc3; /* -35   0  +5 */
background: #3f66c0; /* -35   0   0 */

}
h2 {
color: rgba(200,200,200,0.75);
}
a {
border-bottom: 1px solid rgba(180,180,180,0.5);
}
a:hover {
color: #B29FDC;
color: rgba(180,180,180,0.75);
}
.button a {
background: #513394;
background: #472c81;
background: rgba(0,0,0,0.3);
}
.button a:hover {
background: #472c81;
background: #3d266f;
background: rgba(0,0,0,0.4);
color: inherit;
}
#logo {
color: rgba(255,255,255,0.5);
}