:root {
	--width-burger: 4rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:62.5%; position:relative; scroll-behavior:smooth; }
html.modal_open body { position:relative; left:-3px; }
body { background:#fff; font-size:62.5%; }
body * { font-family:"Heebo", sans-serif; font-size:1.5rem; line-height:1.25; }
strong { font-size:inherit; }
.cf:after, .w:after {content:""; display:table; clear:both;}
#screen { display:none; }
.nosel { -webkit-tap-highlight-color:transparent !important; }

body { scrollbar-width:thin; scrollbar-color:#888 #eee; }
body::-webkit-scrollbar { position:relative; left:-3px; width:7px; }
body::-webkit-scrollbar-track { background:#eee; }
body::-webkit-scrollbar-thumb { background-color:#888; border-radius:20px; border:1px solid #eee; }

h1 { font-weight:600; font-size:1.8rem; margin-bottom:4rem; position:relative; }
h1 span { display:inline-block; font-size:1.5rem; top:-0.3rem; position:relative; }
h2 { font-weight:600; font-size:2.6rem; margin-bottom:4rem; }
h3 { font-weight:400; font-size:1.4rem; margin-bottom:6rem; line-height:1.45; }
h3.hunch { margin-bottom:3rem; }
ul, p { font-size:1.5rem; font-weight:300; line-height:1.6; margin-bottom:2rem; }
p.focus { font-size:1.8rem; font-weight:200; }
p.tall { margin-bottom:6rem; }
.gray { filter:grayscale(75%) !important; }

ol.list, ul.list { padding-left:2rem; position:relative; }
ol.list li, ul.list li { position:relative; margin-bottom:1rem; }

div.c { width:100%; padding:0 3rem; margin:0 auto; }

header { padding:2rem 0; height:100vh; color:#e2e2e2; background:linear-gradient(0deg, rgba(30,30,30,1) 0%, rgba(10,10,10,1) 55%, rgba(0,0,0,1) 100%); position:relative; }
header:after { content:''; position:absolute; z-index:100; top:0; left:0; height:100%; width:100%; background:url(/assets/images/dragon.webp) bottom right -10vw no-repeat; background-size:80vh; }
header * { position:relative; z-index:200; }
header h1 span { display:none; }
header p.focus { font-size:1.7rem; font-weight:300; }

header .c { display:flex; min-height:100vh; align-items:center; }
header .c .vc { display:flex; flex-direction:column; }

header .c .vc div.col { width:clamp(40rem, 500px, calc(100% - 4rem)); text-align:justify; }
header .c .vc nav { margin-top:50px; }
header .c .vc nav a { color:#e2e2e2; display:inline-block; text-decoration:none; padding:15px 50px; margin-right:20px; border:1px dashed #666; }

main { white-space-collapse:collapse; }
main section { display:flex; align-items:center; margin:0; padding:24rem 0; }
main section.dark { padding:24rem 0; background:linear-gradient(0deg, rgba(30,30,30,1) 0%, rgba(10,10,10,1) 55%, rgba(0,0,0,1) 100%); color:#e2e2e2 !important; }
main section.light { background:#f9f9f9; }
main section.white { background:linear-gradient(180deg, rgba(30,30,30,0.05) 0%, rgba(10,10,10,0.05) 15%, rgba(255,255,255,1) 100%); }

main div.mood { margin-bottom:-10px; }
main div.mood img { margin-bottom:-10px; }

main section#petroleum { padding:24rem 0; }
main section#clean { padding:24rem 0; }
	
footer { height:0rem; }

.vc.inside { margin-top:6rem; }
.vc.inside h3 { margin-bottom:2rem; }


/*
	----------------------------------------------
	R E S P O N S I B L Y   R E S P O N S I V E  ?
	----------------------------------------------
*/


@media only screen and (max-width:767px)
{
	/*	Misc */
	#screen { height:10px; }

	h2 { font-weight:600; font-size:2.6rem; margin-bottom:2rem; }
	h3 { font-size:1.8rem; margin-bottom:2rem; }

	ul, p { font-size:1.5rem; }
	p.focus { font-size:1.6rem; }
	p.tall { margin-bottom:4rem; }

	div.cols.one > div.col { width:100%; }
	div.cols.two > div.col { width:100%; }
	div.cols.three > div.col { width:100%; }
	div.cols.four > div.col { width:100%; }
	div.cols.five > div.col { width:100%; }
	div.cols.six > div.col { width:100%; }

	header { padding-top:7vh; }
	header h1 img { width:80%; }
	header:after { background-size:80vh; background-position:bottom right -80vw; opacity:0.3; }
	header .c { align-items:flex-start; }
	header .c .vc nav { margin-top:30px; }
	header .c .vc nav a { padding:20px 30px; margin-bottom:2rem; background:rgba(0,0,0,0.3); }
	
	header h1 { margin-bottom:2rem; }
	header .c .vc div.col { width:calc(100% - 2rem); text-align:left; }
	header p.focus { font-size:1.5rem; font-weight:300; }

	main section { display:flex; align-items:center; margin:0; padding:8rem 0; }
	main section#petroleum { padding:8rem 0; }
	main section#clean { padding:8rem 0; }

	main div.mood { height:30vh; overflow:hidden; text-align:center; }
	main div.mood img { height:30vh; width:auto; }

	footer { height:0; }
}

@media only screen and (max-width:320px)
{
	main section.services ul:before { height:calc(100% - 5.4rem); }

	footer { height:0; }
}

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

@media only screen and (min-width:768px) and (max-width:1280px)
{
	/*	Misc */
	#screen { height:30px; }

	h1 { font-size:2.8rem; margin-bottom:4rem; }
	h1 span { font-size:2.3rem; top:-0.3rem; }
	h2 { font-size:2.8rem; margin-bottom:3rem; }
	h3 { font-size:2.2rem; margin-bottom:3rem; }

	div.cols.one > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:0; }
	div.cols.one > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:0; }
	div.cols.two > div.col { width:calc((100% - 12rem) / 2); float:left; margin-right:6rem; }
	div.cols.two > div.col:nth-child(2n) { margin-right:0; }
	div.cols.three > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:6rem; }
	div.cols.three > div.col:nth-child(3n) { margin-right:0; }
	div.cols.four > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:6rem; }
	div.cols.four > div.col:nth-child(3n) { margin-right:0; }
	div.cols.five > div.col { width:calc((100% - 6rem) / 2); float:left; margin-right:6rem; }
	div.cols.five > div.col:nth-child(2n) { margin-right:0; }
	div.cols.six > div.col { width:calc((100% - 6rem) / 2); float:left; margin-right:6rem; }
	div.cols.six > div.col:nth-child(2n) { margin-right:0; }

	header { background-size:50%; height:60rem; }
	header p.focus { font-size:1.5rem; font-weight:300; }

	main section { padding:6rem 0; }
}

@media only screen and (min-width:1024px)
{
	/*	Misc */
	#screen { height:40px; }
}


@media only screen and (min-width:1281px)
{
	/*	Misc */
	#screen { height:50px; }

	h1 { font-weight:600; font-size:2.8rem; margin-bottom:4rem; position:relative; }
	h1 span { display:inline-block; font-size:2.5rem; top:-0.3rem; position:relative; }
	h2 { font-weight:600; font-size:3.6rem; margin-bottom:4rem; }
	h3 { font-weight:400; font-size:2.4rem; margin-bottom:6rem; line-height:1.45; }
	h3.hunch { margin-bottom:3rem; }
	ul, p { font-size:1.5rem; font-weight:300; line-height:1.6; margin-bottom:2rem; }
	p.focus { font-size:1.8rem; font-weight:200; }
	p.tall { margin-bottom:6rem; }


	div.cols {}
	div.cols.one > div.col { width:calc(100% - 12rem); float:left; margin-right:0; }
	div.cols.one > div.col { width:calc(100% - 12rem); float:left; margin-right:0; }
	div.cols.two > div.col { width:calc((100% - 12rem) / 2); float:left; margin-right:6rem; }
	div.cols.two > div.col:nth-child(2n) { margin-right:0; }
	div.cols.three > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:6rem; }
	div.cols.three > div.col:nth-child(3n) { margin-right:0; }
	div.cols.four > div.col { width:calc((100% - 18rem) / 4); float:left; margin-right:6rem; }
	div.cols.four > div.col:nth-child(4n) { margin-right:0; }
	div.cols.five > div.col { width:calc((100% - 24rem) / 5); float:left; margin-right:6rem; }
	div.cols.five > div.col:nth-child(5n) { margin-right:0; }
	div.cols.six > div.col { width:calc((100% - 30rem) / 6); float:left; margin-right:6rem; }
	div.cols.six > div.col:nth-child(6n) { margin-right:0; }

	div.c { width:144rem; padding:0 6rem; margin:0 auto; }

	header { padding:4rem 0; height:100vh; }
	header p.focus { font-size:1.7rem; font-weight:300; }

	main section { display:flex; align-items:center; margin:0; padding:18rem 0; }
}

@media only screen and (min-width:1440px)
{
	/*	Misc */
	#screen { height:40px; }
}


@media only screen and (min-width:1681px)
{
	/*	Misc */
	#screen { height:60px; }
}}

@media only screen and (min-width:1682px)
{
}