@charset "UTF-8";

/*=================================== Custom fonts ===================================*/

/*=================================== Initialization & General ===================================*/

* { margin:0; padding:0; border:none; box-sizing:border-box; list-style:none; }
html { font-size:1vw; }
body > *, main > * { position:relative; width:100%; float:left; }
/*body, a { cursor:url("../images/cursor.png"), pointer !important; }*/
h1, h2, h3, h4, h5, h6, p { border:0; font-size:inherit; font-weight:inherit; }
button { position:relative; padding:1.2rem 2.4rem; background-color:transparent; background-repeat:no-repeat; border:0.075rem #799f98 solid; cursor:pointer; overflow: hidden; outline:none; z-index:8; }

/*=================================== Snippets ===================================*/

/*-- Navigation Snippet --*/
header { width:100%; position:absolute !important; z-index:10; }
header .logo { width:10rem; float:left; margin:3rem; }
header nav { float:right; }
header nav li { margin-left:0.08rem; float:left; }
header nav li a { padding:1.1rem 3rem; background:#fff; display:block; }
header nav li a:hover, header nav li.active a { background:#799f98; }
header nav li.home { display:none; }
header nav .toggle { display:none; }
header nav .contact.mobile { display:none; }


/*-- Footer Snippet --*/
footer { padding:3rem 0 5rem 0; text-align:center; background-color:#f8f8f8; }
footer > a img { width:8%; margin-bottom:3rem;}
footer .legal { margin-top:3rem; }
footer .legal div { width:28%; display:inline-block; }
footer div img { width:3rem; margin:3rem 0.5rem 0 0.5rem; }
footer h2 { margin-bottom:0.5rem; }
footer h3 { height:2rem; background-size:1rem; background-repeat:no-repeat; background-image:linear-gradient(bottom, #799f98, #799f98 5%, transparent 5%, transparent 100%); background-image:-webkit-linear-gradient(bottom, #799f98, #799f98 5%, transparent 5%, transparent 100%); }
footer.about, footer.services, footer.contact { background-color:#f8f8f8; }

/*-- Button Snippets --*/
button.back { width:2.25rem; height:1.5rem; padding:0 !important; border:0 !important; background:url(/assets/images/back.png) no-repeat center center; background-size:contain; }
button.continue { width:1.2rem; height:1.9rem; padding:0 !important; border:0 !important; background:url(/assets/images/continue.png) no-repeat center center; background-size:contain; }

/*=================================== Templates ===================================*/

main * div.image, main > * > img { position:absolute; z-index:0; }
main > * > div:first-of-type { position:relative; z-index:2; }
main > * { margin:0 0 10rem 0; }
main.services > *:not(.intro) { margin:0 0 14rem 0; }
main > * > div > h2, main > * > div > h3 { margin-bottom:3rem; }
main > * > div > p, main > * > * > div > p { margin-bottom:2rem; }
main * div.image img { width:100%; }
main * div.image div { bottom:-2.8rem; position:absolute; }
main h2 { height:2.2rem; background-size:1rem; background-repeat:no-repeat; background-image:linear-gradient(bottom, #c07c5c, #c07c5c 5%, transparent 5%, transparent 100%); background-image:-webkit-linear-gradient(bottom, #c07c5c, #c07c5c 5%, transparent 5%, transparent 100%); }
.intro h1 a, .outro div a { cursor:default; }
.intro, .outro { height:100vh; overflow:hidden; }
.intro h1, .intro > a, .outro span { left:3rem; z-index:5; max-width:80%; position:absolute; }
.intro h1 { bottom:20vh; }
.intro h1 > span { width:65%; }
.intro h1 > span, .outro span a { height:10rem; vertical-align:-2rem; position:relative; display:inline-block; overflow:hidden; }
.intro h1 > span a { top:10rem; display:block; position:absolute; transition:0.35s ease-out; }
.intro h1 > span a.active { top:0; }
.intro img, .outro img { min-width:100vw; min-height:100vh; top:0; bottom:0; margin:auto; }
.intro > a { height:2rem; bottom:5vh; }
.home .about > div:first-of-type { width:38%; min-height:42rem; margin-left:50%; }
.home .about div.image { width:26%; left:0; top:10rem; position:absolute; z-index:2; }
.home .about div.image div, .home .contact div.image div { right:0; }
.home .about div.image button, .home .contact div.image button { right:-50%; }
.home .services { min-height:60rem; }
.home .services > div:first-of-type { width:54%; margin:6rem 0 0 20%; }
.home .services > img { width:26%; left:0; top:29rem; }
.home .services div.image { width:40%; right:0; top:0; }
.home .services div.image div { left:0; }
.home .services div.image button { left:-50%; }
.home .references { padding:5rem 3%; background-color:#f1f1f1; }
.home .references > div:first-of-type { width:40%; margin:2rem 0 0 18%; float:left; }
.home .references > div:first-of-type > a{ height:inherit !important; border:none !important; }
.home .references .showcase { width:40%; bottom:-6.8rem; float:right; position:relative; }
.home .references .showcase a, .home .references .showcase .button { display:block; float:left; }
.home .references .showcase a { width:40%; margin:0.75rem 5%; }
.home .references .showcase .button { width:50%; }
.home .references .showcase img { width:100%; }
.home .references .showcase .referencesClients, .home .references .showcase .referencesPartners { height:40rem; padding:3rem 0; float:left; }
.home .references .showcase .referencesClients { background-color:#87b2aa; }
.home .references .showcase .referencesPartners { background-color:#abcec7; display:none; }
.home .references .showcase .button { text-align:center; padding:1.2rem 2.4rem; cursor:pointer; }
.home .references .showcase .button:nth-of-type(3) { background-color:#87b2aa; }
.home .references .showcase .button:nth-of-type(4) { background-color:#abcec7; }
.home .contact > div:first-of-type { width:38%; min-height:47rem; margin:6rem 0 0 52%; }
.home .contact > div:first-of-type > h3 { margin-top:6rem; }
.home .contact > img { width:30%; right:0; top:0; }
.home .contact div.image { width:34%; left:0; top:0; }
.about .main > div:first-of-type { margin-left:22%; min-height:49rem; }
.about .main > div:first-of-type h3 { width:40%; }
.about .main > div:first-of-type div { width:38%; margin-left:44%; }
.about .main > img { width:40%; left:0; top:23rem; }
.about .contact > div:first-of-type { margin:5rem 0 0 22%; min-height:25rem; }
.about .contact div.image { width:40%; right:0; top:0; }
.about .contact div.image div { left:0; top:-3rem; }
.about .contact div.image button { left:-50%; }
.about .contact div h2 { margin-bottom:6.5rem !important; }
.about .contact div > span { bottom:0; position:absolute; }
.services .main > div h3 { margin-bottom:0 !important; }
.services .main > div h3, .about .main > div h4, .services .main > div div { width:30rem; }
.services .main > div div { margin-top:3rem; }
.services .main > img { width:42%; }
.services .main:nth-child(2) > h2 { margin-left:20%; }
.services .main:nth-child(2) > div { margin-left:36%; min-height:30rem; }
.services .main:nth-child(2) > div h3 { margin-top:5rem; }
.services .main:nth-child(2) > div div { margin-top:4rem; margin-left:22%; }
.services .main:nth-child(2) > img { left:0; top:6rem; }
.services .main:nth-child(3) > div { margin-left:10%; min-height:37rem; }
.services .main:nth-child(3) > div div { margin-top:3rem; }
.services .main:nth-child(3) > img { right:0; top:0; }
.services .main:nth-child(4) > div { margin-left:36%; min-height:29rem; }
.services .main:nth-child(4) > div h3 { margin-top:2rem; }
.services .main:nth-child(4) > div div { margin-top:3rem; margin-left:34%; }
.services .main:nth-child(4) > img { left:0; top:0; }
.services .main:nth-child(5) > h2 { margin:0 0 6rem 10%; }
.services .main:nth-child(5) > div { margin-left:10%; min-height:37rem; }
.services .main:nth-child(5) > div h3 { width:38rem; }
.services .main:nth-child(5) > div div { margin-top:3rem; }
.services .main:nth-child(5) > img { right:0; top:9rem; }
/*.services .contact > div:first-of-type { width:45%; margin:5rem 0 0 20%; min-height:16rem; float:left; }
.services .contact button { float:left; margin-top:5rem; }
.services .contact div h2 { margin-bottom:6.5rem !important; }*/
.contact .main > div { margin:5rem 0 0 22%; min-height:49rem; }
.contact .main > div h3 { margin-top:6rem; }
.contact .main > div h3, .contact .main > div span { margin-left:36%; display:block; }
.contact .main > img:nth-of-type(1) { width:28%; right:0; top:0; }
.contact .main > img:nth-of-type(2) { width:34%; left:0; top:20rem; }
.contact .services > div:first-of-type { width:45%; margin:5rem 0 0 20%; min-height:16rem; float:left; }
.contact .services button { float:left; margin-top:5rem; }
.contact .services div h2 { margin-bottom:6.5rem !important; }




/*=================================== Texts ===================================*/

header nav, footer h3, .intro > a, .home .references .showcase { font:1rem 'Roboto', sans-serif; letter-spacing:0.11rem; }
button, main h2, footer .legal * { font:0.9rem 'DM Sans', sans-serif; letter-spacing:0.11rem; }
button { font-weight:300; }
main > * > div:first-of-type, footer div h2 span { font:1.3rem 'Scope One', sans-serif; line-height:2rem; color:#000; }
main h2, .intro h1 a, .outro span a { color:#c07c5c !important; }
main h3, main h4 { font:200 3.9rem 'Muli', sans-serif; }
main h3 { color:#000; }
footer { color:#3f3f3f; }
footer .contact a { font:1.8rem 'Scope One', sans-serif; }
footer h2, .data { font:2.6rem 'Scope One', sans-serif; }
footer h2 { line-height:2.2rem; }
footer h2, footer h3, main h4 { color:#799f98; }
footer div a, footer div span { font:1rem 'Scope One', sans-serif; }
.intro h1, .outro span { font:200 8rem 'Muli', sans-serif; color:#fff; }
.intro button, .intro button { color:#fff; }
.data { color:#000; line-height:4rem; }

/*Uppercase*/
header nav, button, footer h3, footer .legal, main h2, .intro > a, .home .references .showcase { text-transform:uppercase; }

header nav a:link, header nav a:visited, .intro > a:link, .intro > a:visited, .home .references .showcase .button { text-decoration:none; color:#799f98;; }
header nav a:hover, header nav a:active, header nav li.active a, .home .references .showcase .button { text-decoration:none; color:#fff; }
.home .references .showcase .button span { border-bottom:0.1rem #fff solid; }
footer div a:link, footer div a:visited { text-decoration:none; color:#3f3f3f; }
main > * > div:first-of-type a:link, main > * > div:first-of-type a:visited { height:1.8rem; border-bottom:0.06rem #000 solid; text-decoration:none; color:#000; display:inline-block; }
a:link button span, a:visited button span { text-decoration:none; color:#799f98; border-bottom:0.06rem #799f98 solid; }
a:hover button span, a:active button span, .home .references .showcase .button:hover span { border-bottom:none; }
main > * > div:first-of-type a:hover, main > * > div:first-of-type a:active, footer > div:first-of-type a:hover, footer > div:first-of-type a:active { border-bottom:0.06rem #799f98 solid; text-decoration:none; color:#799f98; }
.intro h1 a:link, .intro h1 a:visited, .intro h1 a:hover, .intro h1 a:active, .outro span a:link, .outro span a:visited, .outro span a:hover, .outro span a:active { text-decoration:none; color:#c07c5c; }
.data a:link, .data a:visited { border:none !important; text-decoration:none !important; color:#000 !important; }
.data a:hover, .data a:active { height:3.5rem !important; border-bottom:0.1rem solid #799f98 !important; text-decoration:none !important; color:#799f98 !important; }

/*=================================== Mobile Styles ===================================*/

@media all and (max-width:600px) {
	html { font-size:2.3vw; }

  	/*-- Navigation Snippet --*/	
	header nav { right:0; top:0; }
	header nav ul { display:none; }
	header.open nav ul { display:block; width:100vw; height:100vh; padding:10vh 3rem 0 3rem;  }
	header.open { background-color:#7aa099; }
	header nav li { width:100%; height:15vh; margin-left:0; float:left; display:block; text-align:center; }
	header nav li a { height:4rem; padding:0; background:none; }
	header nav .toggle { width:3rem; height:3rem; right:3rem; top:3rem; position:absolute; display:block; background:url(/assets/images/open.png) no-repeat; background-size:contain; }
  	header nav .toggle.open { background:url(/assets/images/close.png) no-repeat; background-size:contain; }
  	header nav .contact.desktop { display:none; }
  	header nav .contact.mobile { display:unset; }

	/*-- Footer Snippet --*/
	footer { padding:5rem 3rem; }
	footer > a img { width:33%; }
	footer > div { margin:0 0 3rem 0 !important;  float:left !important; }
	footer div img { width:6rem; margin:3rem 1rem 0 1rem; }
	footer h2 { margin-bottom:7rem; }
	footer h3 { height:2rem; background-size:1rem; background-repeat:no-repeat; background-image:linear-gradient(bottom, #799f98, #799f98 5%, transparent 5%, transparent 100%); background-image:-webkit-linear-gradient(bottom, #799f98, #799f98 5%, transparent 5%, transparent 100%); }
	footer.about, footer.services, footer.contact { background-color:#f1f1f1; }
	footer .social { margin:3rem 0 4rem 0 !important; }
	footer .contact, footer .legal, footer .social { width:100%; }
	footer .legal div { width:100% !important; float:left; margin-top:1rem; }

	/*-- Templates --*/
	main * { min-height:0 !important; }
	main.home section:not(.intro) img { display:none; }
	main.about section.main  { padding-top:30rem; }
	main.about section:not(.intro) img { height:25rem; }
	main.about section:not(.intro) img, main.services section:not(.intro) img { width:auto !important; top:0; }
	main.services section:not(.intro)  { padding-top:35rem; }
	main.services section#mainParagraph1  { padding-top:41rem; }
	main.services section:not(.intro) img { height:30rem; }
	main.services section#mainParagraph2 { text-align:right; }
	main.services section#mainParagraph2 div div { width:100% !important; }
	main * div { width:84% !important; margin-left:0 !important; margin-right:0 !important; }
	main * h3, main > * > div > span { width:100% !important; margin-left:0 !important; }
	main > * { margin:0 0 10rem 0; }
	main > * > div, main > * > h2 { margin-left:3rem !important; }
	main > * > div > span { position:inherit !important; }
	main * div.image, main * div.image div, main * div.image button { position:inherit !important; left:inherit !important; right:inherit !important; top:inherit !important; bottom:inherit !important; }
	main * div.image button { margin-top:5rem; }
	main h2 { height:2.6rem; }
	.intro a { background:none !important; }
	.intro img, .outro img { display:block !important; }
	.intro h1 { bottom:15vh; }
	.intro h1 > span { width:100%; height:12rem; word-break: break-all; }
	.intro h1 > span a { display:none; }
	.intro h1 > span a.active { display:block; }
	.outro span a { height:inherit; vertical-align:inherit; display:inherit;}
	
	.home .references { padding:5rem 0; }
	.home .references .showcase { float:left; }
	.home .references .showcase, .home .references .showcase > div { width:100% !important; margin-left:0 !important; }
	.home .references .showcase img { display:block !important; }
	.about .contact div h2 { margin-bottom:3rem !important; }


	/*-- Texts --*/
	header nav li a { font:300 3em 'Muli', sans-serif; color:#fff !important; }
	button, footer h3, main h2, .intro > a, .home .references .showcase { font:1.5rem 'Roboto', sans-serif; letter-spacing:0.16rem; }
	main > * > div:first-of-type, footer div h2 span { font:2rem 'Scope One', sans-serif; line-height:3rem; }
	footer div a, footer div span { font:1.8rem 'Scope One', sans-serif; }
	footer h2, .data { font:2.3rem 'Scope One', sans-serif; }
	.intro h1 { font:200 5.5rem/6.6rem 'Muli', sans-serif; }
	.outro span { font:200 3.8rem 'Muli', sans-serif; }

	main > * > div:first-of-type a:link, main > * > div:first-of-type a:visited { height:2.8rem; }

}