* {box-sizing:border-box;}

html,
body {height:100%; background-color:#20D866; color:#FFF; font-family:Verdana,Helvetica,sans-serif; margin:0;}		/* Green Color */
body:before {/*content:''; background:#000 linear-gradient(-180deg,rgba(0,0,0,0),#000); position:absolute;top:0;left:0; width:100%;height:300px; z-index:-10;*/}


a {color:rgb(30,189,81); color:#20D866;}


header {display:flex; flex-direction:row; align-items:center; background:linear-gradient(-180deg,#000,#110F10);}

header main {max-width:52rem; width:100%; padding:0 1rem; margin:0 auto; text-align:center; background-color:#0004; transition:.5s background-color;}

header a.brand {flex:0 1 120px; margin:2rem 0 1rem; display:block;}
header a.brand img {max-width:100%;}

header h1 {display:none;}
header h1 {/*flex:1 1 auto; padding:1rem; text-transform:uppercase; transition:.15s font-size; width:100%; text-align:center; background-color:#FFF1; border:1px solid #FFF;*/}

header ul.menu {flex:1 1 auto; list-style:none; text-transform:uppercase; text-align:center; margin:1rem; padding:0; color:rgb(30,189,81); color:#20D866; font-family:sans-serif;}		/* Green Color */
header ul.menu {display:flex; flex-direction:row; justify-content:center;}
header ul.menu li.item {flex:1 0 25%;}
header ul.menu li.item {font-size:1.5rem; background-color:#FFFFFF12; /*background-color:#110F10;*/ border:1px solid #0008; margin:.25rem; position:relative; transition:.25s font-size;}
header ul.menu li.item a {display:block; padding:1rem 1rem .75rem 2.15em; text-decoration:none; color:inherit;}
header ul.menu li.item a span.icon {/*margin-right:1em;*/ position:absolute; top: 50%; transform:translateY(-50%); left:1rem;}



div#container {/*height:100%;*/ user-select:none; background-color:#110F10; min-height:100%;}
div#container {/*display:flex; flex-direction:column; justify-content:center; align-content:center; align-items:center;*/}


div#container section main {max-width:80rem; margin:0 auto; background-color:#0004;}


div#container section#banner {padding:4rem 0 6rem; transition:.5s padding; text-align:center;}
div#container section#banner img {max-width:100%;}
div#container section#banner div.label {color:#22D764; font-size:5rem; letter-spacing:.35em; text-transform:uppercase; font-family:'Roboto Condensed','Arial Narrow',sans-serif; text-align:center;}		/* Green Color */



footer {background-color:#110F10;}
footer main {padding:2rem 0; text-align:center;}
footer main>div {padding:1rem 0;}
footer main div.copy {}
footer main div.banner {}
footer main div.banner img {width:100%; max-width:30rem;}
footer main div.social {}
footer main div.social a {text-decoration:none; color:inherit; font-size:1.75rem; margin:0 1rem;}
footer main div.social a:hover {color:#20D866;}		/* Green Color */




/* Large Screen */
@media screen and (max-width:85rem) {
	div#container section#banner div.label {font-size:4rem;}
}


/* Medium Screen */
@media screen and (max-width:64rem) {
	div#container section#banner {padding:2rem 0 3rem;}
	div#container section#banner div.label {font-size:3rem;}
}

/* Small Screen */
@media screen and (max-width:52rem) {
	/*header h1 {font-size:1.5rem;}*/
	header main {background-color:#0000; width:auto;}
	header ul.menu {flex-direction:column;}
	header ul.menu li.item {font-size:1.125rem;}
	header ul.menu li.item a {padding:1rem 2.15em .75rem;}
	div#container section#banner {/*display:none;*/}
	div#container section#banner {padding:.5rem 0 1.5rem; /*margin-bottom:1.5rem;*/}
	div#container section#banner div.label {font-size:2rem;}

	footer main div.copy {font-size:.75rem;}

	/* Replace img with bg image. */
	/*div#container section#banner {background-image:url('/pic/banner.jpg'); background-size:cover; background-position:center;}*/
	/*div#container section#banner img {visibility:hidden;}*/
}

/* Extra Small Screen */
@media screen and (max-width:30rem) {
	div#container section#banner div.label {font-size:1.2rem;}
}