@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap'); /* font-family: 'Poppins', sans-serif; */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css');

:root{
    --body-bg: #8d1325;
    --standout: #1c5f97;
    --grey-medium: #666666;
    --grey-dark: #333333;
	--section-spacing: 3rem;
	--section-gap: 5rem;
	--text-title1-size: 1.4rem;
	--text-title1-line-height: 2rem;
	--text-title2-size: 1.2rem;
	--text-title2-line-height: 1.8rem;
	--text-title3-size: 1rem;
	--text-title3-line-height: 1.4rem;
    --text-colour-default: #ffffff;
	--text-interface-size: 0.8rem;
	--text-interface-line-height: 1.1rem;
	--text-reading-size: 0.9rem;
	--text-reading-line-height: 1.4rem;
	--text-small-size: 0.7rem;
	--text-small-line-height: 1.1rem;
	--glass-bg: rgba(0,0,0,0.1);
	--glass-backdrop: blur(4px);
	--glass-backdrop-hover: blur(8px);
	--glass-border-radius: 4px;
	--glass-shadow: 0 0 5px rgba(0,0,0,0.3);
	--glass-shadow-hover: 0 0 10px rgba(0,0,0,0.3);
	--svg-white: rgba(255,255,255,0.6);
	--card-padding: 2rem;
	--card-icon-size: 3rem;
}
html{ font-size: 16px; scroll-behavior: smooth; }
body{ position: relative; min-height: 100vh; margin: 0; padding: 0; background-color: var(--body-bg); color: var(--text-colour-default); font-family: 'Poppins', sans-serif; font-size: var(--text-interface-size); font-weight: 300; line-height: var(--text-interface-line-height); overflow-x: hidden;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#600e0f+0,8d1325+50,bf1a41+100 */
	background: rgb(96,14,15); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(96,14,15,1) 0%, rgba(141,19,37,1) 50%, rgba(191,26,65,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(96,14,15,1) 0%,rgba(141,19,37,1) 50%,rgba(191,26,65,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(96,14,15,1) 0%,rgba(141,19,37,1) 50%,rgba(191,26,65,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#600e0f', endColorstr='#bf1a41',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment: fixed;
}
h1{ margin-bottom: 2rem; font-size: var(--text-title1-size); font-weight: 500; line-height: var(--text-title1-line-height); text-shadow: -1px -1px 1px rgba(0,0,0,0.3); }
	h1.secondary{ margin-bottom: 1rem; }
h2{ margin-bottom: 2rem; font-size: var(--text-title1-size); font-weight: 500; line-height: var(--text-title1-line-height); text-shadow: -1px -1px 1px rgba(0,0,0,0.3); }
p+h2{ margin-top: 3rem; }
a,input,button{ cursor: pointer; transition: all 0.3s; }
.linkbutton{ display: inline-block; margin: 0 0.5rem 0.5rem 0; padding: 0.5rem 0.75rem; background-color: #ffffff; color: var(--standout); font-size: var(--text-interface-size); font-weight: 500; border: solid 1px #ffffff; border-radius: 2px; box-shadow: 0 0 10px rgba(0,0,0,0.3); text-decoration: none; text-shadow: none; }
	.linkbutton .fa{ margin-left: 1rem; }
	.linkbutton:hover{ border: solid 1px transparent; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.note{ font-size: 0.7rem !important; }
.glass{ padding: var(--section-spacing); background-color: var(--glass-bg); color: var(--text-colour-default); -moz-backdrop-filter: var(--glass-backdrop); backdrop-filter: var(--glass-backdrop); border-radius: var(--glass-border-radius); box-shadow: var(--glass-shadow); }

/* LAYOUT */
	#parent{ position: relative; display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 2000px; min-height: 100vh; margin: 0 auto; padding: 0; }
		.inner{ clear: both; display: block; width: 100%; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding-left: 30px; padding-right: 30px; }
		.padtop{ padding-top: var(--section-spacing); }
			.padtop.large{ padding-top: var(--section-gap); }
		.padbottom{ padding-bottom:	var(--section-spacing); }
			.padbottom.large{ padding-bottom: var(--section-gap); }
	.doublepane{ display: flex; justify-content: space-between; gap: 1rem; }
		.doublepane>div{ flex-basis: 50%; padding: var(--section-spacing); background-color: var(--glass-bg); color: var(--text-colour-default); -moz-backdrop-filter: var(--glass-backdrop); backdrop-filter: var(--glass-backdrop); border-radius: var(--glass-border-radius); box-shadow: var(--glass-shadow); }

/* CONTENT */
	#maincontent{ position: relative; z-index: 10; margin-bottom: var(--section-spacing); }
		#maincontent .inner{ perspective: 800px; }
		#maincontent p{ margin: 0 0 var(--text-reading-line-height); font-size: var(--text-reading-size); line-height: var(--text-reading-line-height); }
			#maincontent p a:not(.linkbutton){ color: var(--text-colour-default); }
				#maincontent p a:not(.linkbutton):hover{ color: var(--text-colour-default); text-decoration: none; }
		#maincontent section{ position: relative; display: flex; margin: var(--section-gap) 0 10rem; padding: 0 var(--section-spacing); overflow: hidden; transition: all 0.3s; }
			#maincontent section.scrollindicator{ overflow: unset; }
				#maincontent section.scrollindicator:after{ content: '\f107'; position: absolute; left: 0; bottom: -4rem; right: 0; font-family: var(--fa-style-family,"Font Awesome 6 Free"); font-size: 3rem; font-weight: var(--fa-style,900); opacity: 0.3; text-align: center; text-transform: uppercase; }
			#maincontent section.first{ min-height: 80vh; padding-top: var(--section-spacing); }
			#maincontent section .background{ position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; opacity: 0.6; }
				#maincontent section .background.left{ right: 40%; }
				#maincontent section .background.right{ left: 40%; }
				#maincontent section .background svg{ display: block; max-width: 100%; max-height: 100%; }
			#maincontent section .text{ position: relative; z-index: 10; display: inline-block; width: 50%; padding: var(--section-spacing); background-color: var(--glass-bg); color: var(--text-colour-default); -moz-backdrop-filter: var(--glass-backdrop); backdrop-filter: var(--glass-backdrop); border-radius: var(--glass-border-radius); box-shadow: var(--glass-shadow); }
				#maincontent section .text:hover{ backdrop-filter: var(--glass-backdrop-hover); box-shadow: var(--glass-shadow-hover); }
				#maincontent section .text.right{ margin-left: auto; }
	.firefox #maincontent section .text{ border-right: solid 2px var(--svg-white); }
	.firefox #maincontent section .text.right{ border-left: solid 2px var(--svg-white); border-right: none; }
	.firefox #maincontent section .background.left{ right: 50%; }
	.firefox #maincontent section .background.right{ left: 50%; }

/* LISTS */
	.cardlist{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
		.cardlist .card{ padding: var(--card-padding); background-color: var(--glass-bg); -moz-backdrop-filter: var(--glass-backdrop); backdrop-filter: var(--glass-backdrop); border-radius: var(--glass-border-radius); box-shadow: var(--glass-shadow); }
			.cardlist .card .icon{ display: block; margin-bottom: var(--card-padding); }
				.cardlist .card .icon .fa{ font-size: var(--card-icon-size); }
			.cardlist .card .details{ display: block; }
				.cardlist .card .details>.title{ display: block; margin-bottom: 0.5rem; padding-bottom: 0.5rem; font-size: var(--text-title3-size); line-height: var(--text-title3-line-height); border-bottom: solid 1px var(--svg-white); }
				.cardlist .card .details .titlebar{ display: block; margin-bottom: 0.5rem; padding-bottom: 0.5rem; font-size: var(--text-title3-size); line-height: var(--text-title3-line-height); border-bottom: solid 1px var(--svg-white); }
					.cardlist .card .details .titlebar .title{ display: block; margin-bottom: 0.2rem; font-size: var(--text-title3-size); line-height: var(--text-title3-line-height); }
					.cardlist .card .details .titlebar .subtitle{ display: block; margin-bottom: 0.5rem; font-size: var(--text-small-size); line-height: var(--text-small-line-height); }
					.cardlist .card .details .titlebar .price{ display: inline-block; margin-bottom: 0.5rem; font-size: var(--text-reading-size); font-weight: 700; line-height: var(--text-reading-line-height); }
				.cardlist .card .details .description{ font-size: var(--text-interface-size); line-height: var(--text-interface-line-height); }
					.cardlist .card .details .description.featurelist{ display: block; margin: 0; padding: 0.5rem 0; }
						.cardlist .card .details .description.featurelist>li{ display: block; margin: 0 0 0.5rem; }
							.cardlist .card .details .description.featurelist>li .fa{ margin-right: 0.5rem; }
							.cardlist .card .details .description.featurelist>li .domain{ display: inline-block; min-width: 50px; }
							.cardlist .card .details .description.featurelist>li.space{ margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: dotted 1px rgba(255,255,255,0.3); }
	.portfoliolist{ display: block; margin: 0 0 var(--section-spacing); }
		.portfoliolist li{ display: block; padding: 0.5rem 0; }
			.portfoliolist li span{ display: inline-block; margin-left: 1rem; font-size: 0.7rem; opacity: 0.5; }
			.portfoliolist li a{ display: inline-block; margin-left: 1rem; padding: 0.1rem 0.6rem; color: var(--text-colour-default); border: solid 1px rgba(255,255,255,0.3); border-radius: 4px; font-size: 0.7rem; font-weight: 700; opacity: 0.5; text-decoration: none; vertical-align: 0; }
				.portfoliolist li a:hover{ opacity: 1; }
				.portfoliolist li:hover a{ transform: scale(1.1); }
	.contactlist{ display: flex; justify-content: space-between; gap: 2rem; margin: 0 0 var(--section-spacing); }
		.contactlist li{ flex-basis: 33%; }
			.contactlist li a{ display: block; color: var(--text-colour-default); text-align: center; text-decoration: none; }
				.contactlist li a span{ display: block; }
					.contactlist li a .icon{ margin: 0 0 1rem; font-size: 3rem; transition: all 1.2s; }
					.contactlist li a .label{ font-size: 0.7rem; }
				.contactlist li a:hover{ transform: scale(1.2); }
					.contactlist li a:hover .icon{ transform: rotateY(360deg); }

/* HEADER */
	header{ position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--section-spacing); }
		header>a{ position: relative; z-index: 20; flex-basis: 130px; }
			header>a>img{ display: block; width: 100%; }
		header>div{ padding-right: 1rem; }
		header nav{ display: flex; gap: 1px; }
			header nav.main>a{ display: block; padding: 0.5rem 1rem; color: var(--text-colour-default); font-size: var(--text-interface-size); font-weight: 500; border-radius: 2px; box-shadow: 0 0 0px rgba(0,0,0,0.3); text-decoration: none; transition: all 0.6s; }
				header nav.main>a:hover{ background-color: var(--text-colour-default); color: var(--standout); box-shadow: 0 0 5px rgba(0,0,0,0.3); }
				header nav.main>a.selected{ background-color: var(--text-colour-default); color: var(--standout); box-shadow: 0 0 5px rgba(0,0,0,0.3); }
			header nav.aux{ margin-bottom: 0.5rem; justify-content: flex-end; }
				header nav.aux>a{ padding: 0 1rem; color: var(--text-colour-default); font-size: var(--text-interface-size); text-decoration: none; }
					header nav.aux>a:hover{ text-decoration: underline; }
	#mobilenavtrigger{ position: absolute; right: 1rem; top: 63px; z-index: 20; display: none; width: 2rem; height: 23px; }
		#mobilenavtrigger>span{ display: block; height: 5px; margin: 0 0 4px; background-color: var(--text-colour-default); border-radius: 2px; transition: all 0.3s; }
		#mobilenavtrigger.active{  }
			#mobilenavtrigger.active span:nth-child(1){ transform: rotateZ(45deg) translate(5px,5px); }
			#mobilenavtrigger.active span:nth-child(2){ transform: rotateZ(-45deg) translate(1px,-2px); }
			#mobilenavtrigger.active span:nth-child(3){ opacity: 0; transform: translateY(-10px); }
	#notification{display: block; text-align: center; transform: translateY(-2rem);}
		#notification p{ display: inline-block; padding: 0.5rem 1.5rem; background-color: rgba(255,255,255,0.2); color: #ffffff; font-size: 0.8rem; border-radius: 1rem; box-shadow: 0 0 1rem rgba(0,0,0,0.3); }
		#notification a{ color: #ffffff; font-weight: 700; }

/* FOOTER */
	footer{ position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 1rem; background-color: var(--text-colour-default); color: var(--grey-medium); font-size: 0.7rem; line-height: 1rem; box-shadow: 0 0 3rem rgba(0,0,0,0.3); }
		footer .contact{ display: flex; align-items: center; gap: 1rem; }
			footer .contact p{ font-weight: 300; }
				footer .contact p a{ color: var(--standout); font-weight: 500; text-decoration: none; }
					footer .contact p a:hover{ color: var(--body-bg); }

/* BACKGROUNDS and ANIMATIONS */
	.bg1 path{ stroke-dasharray: 11552px; stroke-dashoffset: 0px; transition: all 10s; }
		.bg1.strokein path{ stroke-dasharray: 11552px; stroke-dashoffset: 11552px; transition: none; }
	.bg2 path{ stroke-dasharray: 12195px; stroke-dashoffset: 0px; transition: all 10s; }
		.bg2.strokein path{ stroke-dasharray: 12195px; stroke-dashoffset: 12195px; transition: none; }
	.bg3 path{ stroke-dasharray: 5108px; stroke-dashoffset: 0px; transition: all 3s; }
		.bg3.strokein path{ stroke-dasharray: 5108px; stroke-dashoffset: 5108px; transition: none; }
	.bg4 path{ stroke-dasharray: 12081px; stroke-dashoffset: 0px; transition: all 20s; }
		.bg4.strokein path{ stroke-dasharray: 12081px; stroke-dashoffset: 12081px; transition: none; }
	.bg5 path{ stroke-dasharray: 3550px; stroke-dashoffset: 0px; transition: all 10s; }
		.bg5.strokein path{ stroke-dasharray: 3550px; stroke-dashoffset: 3550px; transition: none; }
	.fx-flip{ opacity: 0; transform: rotateY(-90deg); }
	/*.fx-slide{ opacity: 0; transform: translate(50%,0%); }*/
	.fx-slide{ filter: blur(10px); opacity: 0.5; transform: scale(0.8); }
	.fx-zoom{ opacity: 0; transform: scale(0.1); }
	.fx-dazzle{ opacity: 0; filter: brightness(500%); box-shadow: 0 0 60px rgba(255,255,255,0.8) !important; transform: scale(2); }
	@keyframes strokein{ to{ stroke-dashoffset: 0px; } }
	@keyframes strokeinfadeout{ to{ stroke-dashoffset: 0px; fill: #ffffff; } }
	@keyframes comein{ from{ opacity: 0; } to{ opacity: 1; } }