/*! Copyright Irfan Maulana - 2017 Developed for FrontEndID */
/*
* Refer to https://confluence.gdn-app.com/display/PM/Blibli+Design+Language+System?preview=/22261571/22273721/Colour%20Pallete.png
*
* Please following this convention variable naming
* http://thesassway.com/beginner/variable-naming
*/
body { background-color: #eaeae9; }

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, footer, header, nav, section { display: block; }

h1 { font-size: 2em; margin: .67em 0; }

figcaption, figure, main { display: block; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

pre { font-family: monospace,monospace; font-size: 1em; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; }

a:active, a:hover { outline-width: 0; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

b, strong { font-weight: inherit; font-weight: bolder; }

code, kbd, samp { font-family: monospace,monospace; font-size: 1em; }

dfn { font-style: italic; }

mark { background-color: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -.25em; }

sup { top: -.5em; }

audio, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

img { border-style: none; }

svg:not(:root) { overflow: hidden; }

button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; }

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }

progress { display: inline-block; vertical-align: baseline; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

details, menu { display: block; }

summary { display: list-item; }

canvas { display: inline-block; }

template { display: none; }

[hidden] { display: none; }

html { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; font-size: 62.5%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; }

*, *:before, *:after { box-sizing: inherit; }

body { font-size: 14px; line-height: 24px; font-family: 'Quicksand', sans-serif; }

.main { margin-top: 70px; color: #008c34; line-height: 1.5; }

.main__content { *zoom: 1; margin: 0 auto; max-width: 92.308em; text-align: center; }

.main__content:before, .main__content:after { display: table; content: ' '; }

.main__content:after { clear: both; }

.main__img { margin-top: 50px; }

.main__img img { border-radius: 1em; }

.main__title { font-size: 5rem; font-weight: 600; font-family: 'Forum', cursive; }

.main__subtitle { font-size: 2rem; color: #999; }

.main__social { *zoom: 1; margin: 0 auto; max-width: 92.308em; text-align: center; }

.main__social:before, .main__social:after { display: table; content: ' '; }

.main__social:after { clear: both; }

.header { position: fixed; top: 0; z-index: 100; width: 100%; background: #008c34; color: #fff; }

.nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.nav a { text-decoration: none; color: #fff; font-size: 3.5rem; font-family: 'Forum', cursive; }

.nav__item { padding: 1.5em; }

.nav__logo { background-color: #fff; border-radius: .5em; height: 60px; padding: .4em; margin-left: 1.5em; }

.nav__logo img { height: 50px; }

.social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.social a { text-decoration: none; color: #999; font-size: 4rem; }

.social a :hover { color: #008c34; }

.social__item { padding: .3em; }

.footer { *zoom: 1; margin: 0 auto; max-width: 92.308em; text-align: center; font-size: 1.5rem; color: #999; margin-top: 50px; }

.footer:before, .footer:after { display: table; content: ' '; }

.footer:after { clear: both; }