/* details ------------------

authors:					Paul and Jack
URL:							https://ohpico.com
description:			If you're not us, GTFO.
cersion:					1.0

font sizes:				13, 16, 19, 22, 38
fonts: 						InterUI

spacing:					4px, 16px, 20px, 32px, 48px, 96px

primary colors:

orange					#ea5336
blue						#1da5ff
grey						#494b4d

secondary colors: 

light blue			#82cdff
black						#252626
med grey				#9c9c9c
light grey			#ebebeb
lighest grey		#f8f8f8

*/








@import url('fonts.css');

* { margin: 0; padding: 0; border: none; outline: none; list-style: none; box-sizing: border-box; }







/* = animations ------------------- */

@keyframes fadeInUp {
	0% { opacity: 0; transform: translateY(24px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
	0% { opacity: 0; transform: translateY(-24px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutUp {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(24px);}
}

.animated { animation-duration: .4s; animation-fill-mode: both; }

.delayed_02s { animation-delay: .2s; }
.delayed_03s { animation-delay: .3s; }
.delayed_04s { animation-delay: .4s; }
.delayed_05s { animation-delay: .5s; }
.delayed_06s { animation-delay: .6s; }


.fadeInUp { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }
.fadeOutUp { animation-name: fadeOutUp;  }








/* = structure ------------------ */

html, body { height: 100%; background: #fff; }
body { font: 300 15px/1.66 "Inter UI", sans-serif; color: #494b4d; text-align: center; }

	.rapper { }
	.content { text-align: left; background: #fff; padding: 48px 16px; }
	.post-submit { display: none; /* until form is submitted */ }


/* = navigation ------------------ */






/* = typography ------------------ */

h1 { }
	h1.pico-logo { display: block; text-indent: -9999px; height: 20px; width: 80px; margin-bottom: 24px; background: url("pico-full.svg") top left no-repeat; background-size: auto 20px; }

article p, article ol { padding-bottom: 24px; }
	
article ol { margin-left: 32px; }
	article ol li { list-style: decimal; padding: 0 0 16px 20px; }

strong { font-weight: 500; color: #252626; }

img { }

a { cursor: pointer; transition: ease color .4s; }
	article a { color: #1da5ff; font-weight: 500; }
	article a:hover { color: #494b4d; }




/* = forms ------------------ */

form { }
label { margin-bottom: 32px; display: block; }
	label span { font-size: 12px; font-weight: 500; text-transform: uppercase; color:: #252626; }

input, button { cursor: pointer; font: 300 15px/1 "Inter UI", sans-serif; }

::placeholder { color: #9c9c9c; }

input { width: 100%; border-bottom: 2px solid #ebebeb; padding: 16px 0; color: #494b4d; transition: ease border .4s; }
input:focus { border-bottom: 2px solid #1da5ff; color: #1da5ff; }

button { width: 100%; text-align: center; padding: 16px 0; text-decoration: none; box-shadow: 0 2px 8px 0 rgba(73,75,77,0.2); border-radius: 4px; display: block; transition: ease background .4s; background: #1da5ff; color: #fff; font-weight: 500;}
button:hover { background: #252626; }

button[disabled="disabled"] { opacity: 0.4; cursor: not-allowed; }
button[disabled="disabled"]:hover { background: #1da5ff; }

.messages { margin-top: 12px; }

.form-message { font-size: 12px; display: none; }
	.default { color: #9c9c9c; }
	.error { color: #ea5336; }
	.success { color: #252626; }
	.checking { color: #1da5ff; }
	.loader { display: block; margin: 2px 4px 0px 0px; float: left; height: 15px; }
	.loader svg { }

/* = common ------------------ */






/* = media queries ------------------ */

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

@media screen and (min-width: 900px) {
	body { padding: 0; margin: 0; background: url("sime-basioli.jpg") center center no-repeat; background-size: cover; }
	.section { }

	.rapper { display: table; height: 100vh; }
		.pre-launch-home .content { display: table-cell; vertical-align: middle; width: 720px; padding: 32px 120px; }
		.pre-launch-more .content { display: table-cell; vertical-align: middle; width: 960px; padding: 32px 120px; }
}