@charset "utf-8";

/* CSS Document */

/* IMPORT */

@import url('/css/fontawesome.css');

/* FONTS */

@font-face {
    font-family: Hvlt;
    src: url('/fonts/hlvticlght-webfont.woff') format('woff'),
         url('/fonts/hlvticlght-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Hvlt;
    src: url('/fonts/hlvticlght_bold-webfont.woff') format('woff'),
		url('/fonts/hlvticlght_bold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Hvlt;
    src: url('/fonts/hlvticlght_italic-webfont.woff') format('woff'),
		url('/fonts/hlvticlght_italic-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: Hvlt;
    src: url('/fonts/hlvticlght_bold_italic-webfont.woff') format('woff'),
		url('/fonts/hlvticlght_bold_italic-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
	font-display: swap;
}

/* ANIMATIONS */

@keyframes fade-in { 
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 2.5rem, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* VARIABLES */

:root {
	--color: #020202;
	--background-color: #FFFFFF;
	--section-background-color: rgba(10, 116, 180, 0.1);
	--section-heading-background-color: rgba(10, 116, 180, 0.7);
	--link-color: #006AAC;
	--link-hover-color: #0D86D1;
	--menu-color: #00395C;
	--menu-background-color: rgba(255, 255, 255, 0.1);
	--menu-hover-color: rgba(255, 255, 255, 0.99);
	--menu-hover-background-color: var(--link-hover-color);
	--accent-color: #083b5b;
	--accent-light-color: #1675B0;
	--secondary-accent-color: #AA0074;
	--secondary-accent-light-color: #C53A99;
	--highlight-color: #FFFFFF;
	--highlight-background: #0079b5;
	--font-primary: 400 normal 15px/160% 'Swis721 Th BT', 'HelveticaNeue', 'Helvetica Neue', Hvlt, 'Helvetica LT Std Light', 'Helvetica 45 Light', Helvetica, Arial, sans-serif;
	--font-secondary: 400 normal 15px/160% Hvlt, 'Swis721 Th BT', 'HelveticaNeue', 'Helvetica Neue', 'Helvetica LT Std Light', 'Helvetica 45 Light', Helvetica, Arial, sans-serif;
	--font-tertiary: var(--font-primary);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color: #FCFCFC;
		--background-color: #202030;
		--section-heading-background-color: rgba(53, 150, 209, 0.7);
		--link-color: #8ACDFF;
		--link-hover-color: #BEEDFF;
		--menu-color: #52AAEC;
		--menu-background-color: rgba(25, 25, 25, 0.1);
		--menu-hover-color: #005587;
		--menu-hover-background-color: var(--menu-color);
		--accent-color: #2B7EB1;
		--accent-light-color: #449AD0;
		--highlight-background: #00669A;
	}
}

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
input,
select,
textarea,
button {
	border: 0 none;
	padding: 0.3em 0.4em;
	border-radius: 1px;
}
pre, code {
	font: 400 normal 13px/110% Consolas, "Courier New", monospace;
}

/* TEXT */

body {
	font: var(--font-primary);
	text-decoration: none;
}
input,
select,
textarea,
button {
	font: var(--font-primary);
	font-weight: 400;
	text-decoration: none;
	font-size: 1rem;
}
h1,
h4,
th,
.h1,
.h4 {
	font: var(--font-secondary);
	font-weight: 400;
}
h2,
h3,
.h2,
.h3 {
	font: var(--font-tertiary);
	font-weight: 400;
}

/* COLOURS */

body,
td,
th,
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.summary .name {
	color: var(--color);
}
body,
header #menu-header {
	background-color: var(--background-color);
}
a,
a:visited,
a:active {
	color: var(--link-color);
}
a:hover,
a.active {
	color: var(--link-hover-color);
}
header nav,
header nav a,
header nav a:visited,
header nav a:active,
header nav ul ul a:hover {
	color: var(--menu-color);
}
header nav a:hover,
header nav .current > a,
header nav .current > a:visited,
header nav .current > a:active,
header nav .current > a,
header nav .current > a:visited,
header nav .current > a:active,
header nav .current > a:hover,
header nav .level-1 a:hover,
header nav .level-2 a:hover,
header nav .level-3 a:hover,
header nav .level-1 .current > a,
header nav .level-2 .current > a,
header nav .level-3 .current > a {
	color: color-mix(in lab, var(--menu-hover-color), var(--background-color) 95%);
	background-color: var(--menu-hover-background-color);
}
article button,
article .button,
footer #menu-footer-social a {
	color: var(--background-color);
	background-color: var(--link-color);
}
article button:hover,
article .button:hover,
footer #menu-footer-social a:hover,
article button.active,
article .button.active {
	background-color: var(--link-hover-color);
}
article button[disabled=disabled],
article button[disabled=disabled]:hover,
article .button-disabled,
article .button.disabled:hover {
	opacity: 0.5;
	color: var(--background-color);
	background-color: var(--link-color);
}
input,
select,
textarea {
	background-color: var(--background-color);
	color: var(--color);
}
button {
	background-color: var(--accent-color);
	color: var(--background-color);
}
button:hover,
button:focus {
	background-color: var(--accent-light-color);
	color: var(--background-color);
}
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=date],
input[type=time],
input[type=search],
input[type=password],
select,
textarea {
	border: 2px solid var(--color);
	transition: 0.2s background-color linear;
}
input[type=text]:focus-visible,
input[type=email]:focus-visible,
input[type=tel]:focus-visible,
input[type=url]:focus-visible,
input[type=date]:focus-visible,
input[type=time]:focus-visible,
input[type=search]:focus-visible,
input[type=password]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	background-color: color-mix(in lab, var(--background-color) 90%, var(--accent-light-color));
}
#domain-search-form .domain-tlds label {
	opacity: 0.6;
	box-shadow: 0 0 0 2px var(--accent-color);
}
#domain-search-form .domain-tlds label:focus,
#domain-search-form .domain-tlds label:hover {
	opacity: 1;
}
.cart .preferences .options label {
	background-color: var(--background-color);
}
#domain-search-form .domain-tlds label.checked,
#domain-search-form .domain-tlds label.checked:hover,
#domain-search-form .domain-tlds label.checked:focus,
.cart .preferences label.checked,
.cart .preferences label.checked:hover,
.cart .preferences label.checked:focus {
	background-color: var(--accent-light-color);
	color: var(--background-color);
	opacity: 1;
}
footer {
	border-top: 2px solid var(--accent-color);
}
#message-overlay {
	background-color: rgba(193, 204, 221, 0.6);
}
#message-title {
	color: var(--background-color);
	background-color: var(--link-color);
}
#message-title,
#message-confirm,
#messages .message {
	border: 1px solid var(--accent-color);
}

/* GENERAL */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 3rem;
	height: 100%;
	overflow: auto;
}
body {
	position: relative;
	margin: 0;
	padding-block-end: 20rem;
	min-height: 10vh;
}
a,
a:visited,
a:hover {
	text-decoration: none;
}
a {
	transition: 0.2s color linear, 0.2s background-color linear;
}
img {
	width: 100%;
	height: auto;
	border: 0 none;
}
nav {
	clear: both;
}
.clear {
	clear: both;
	height: 1px;
	margin-block-end: -1px;
	position: relative;
	width: 100%;
}
h1,
h2,
h3,
h4,
ul,
ol,
p {
	font-weight: 400;
	line-height: 180%;
}
h1,
h2,
h3,
h4 {
	margin-block: 0.8em 0.3em;
}
p {
	margin-block: 0.9em 1.1em;
}
section > *:first-child {
	margin-block-start: 0;
}
section > *:last-child {
	margin-block-end: 0;
}
h1,
.h1 {
	line-height: 130%;
	font-size: 2.2rem;
}
h2,
.h2 {
	font-size: 1.4rem;
}
h3,
.h3 {
	font-size: 1.2rem;
}
h4,
.h4 {
	font-size: 1.1rem;
}
h1 .category,
h1 .prefix,
h2 .category,
h2 .prefix,
.h1 .categpry,
.h1 .prefix,
.h2 .categpry,
.h2 .prefix {
	display: block;
	font-size: 0.6em;
	line-height: 120%;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
article > ul,
article .links {
	list-style: square;
}
article > ul > li,
article .links > li {
	margin-inline-start: 1.25em;
	padding-inline-start: 0.65em;
}

/* LAYOUT */

#main {
	margin-inline: auto;
}
header,
article,
footer {
	clear: both;
	padding-block: 2rem;
	padding-inline: 1rem;
}
header,
footer {
	line-height: 100%;
}
header {
	min-height: 11.6rem;
	padding-block-end: 0;
	text-align: start;
}
article {
	line-height: 160%;
	min-height: 25em;
	margin-block-end: 3rem;
}
footer {
	text-align: center;
	min-height: 14rem;
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	inset-inline-start: 0;
	padding-block: 1.3rem;
	padding-inline: 1rem;
	background-color: var(--background-color);
	max-width: none;
}

/* FORMS AND BUTTONS */

article .buttons a,
article .button a,
article .actions a,
article a.button,
article .buttons button,
article .actions button,
article button[type=submit],
article button[type=button],
article button[type=reset] {
	min-width: 10em;
	line-height: 220%;
	padding: 0;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	transition: 0.2s border linear, 0.2s color linear, 0.2s background-color linear, 0.2s box-shadow ease-in-out;
	border-radius: 2px;
}
article .actions a {
	display: inline-block;
	padding-block: 0;
	padding-inline: 1.5rem;
	font-size: 0.85em;
}
article .buttons a,
article .button a,
article a.button {
	display: block;
	padding-block: 0;
	padding-inline: 0;
}
article .buttons a + a {
	margin-block-start: 1.1rem;
}
article section h1:first-child,
article section h2:first-child,
article section .name:first-child {
	margin-block-start: 0;
}
article section form > p:not(:last-child) {
	padding-block-end: 0;
}
article section p > #password-toggle {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	color: rgba(0, 0, 0, 0.5);
	display: block;
	margin-block: -2.1rem 0.1rem;
	margin-inline: auto 0;
	padding: 0;
	position: relative;
	z-index: 10;
	line-height: 2rem;
	min-width: 2em;
	border: 0 none;
	font-size: 1.3em;
}
article section p > #password-toggle:hover .fa {
	transform: none;
}
article .field {
	margin-block: 0.5em 0.8em;
	margin-inline: 0;
}
article p > label,
article .field,
article p > label > input[type=text],
article .field > input[type=text],
article p > label > input[type=search],
article .field > input[type=search],
article p > label > input[type=email],
article .field > input[type=email],
article p > label > input[type=tel],
article .field > input[type=tel],
article p > label > input[type=url],
article .field > input[type=url],
article p > label > input[type=date],
article .field > input[type=date],
article p > label > input[type=time],
article .field > input[type=time],
article p > label > input[type=password],
article .field > input[type=password],
article p > label > select,
article .field > select,
article p > label > textarea,
article .field > textarea,
article p.buttons button {
	display: block;
	width: 100%;
}
article button .fa {
	font-size: 0.9em;
	margin-inline: 0.3em;
	position: relative;
	transition: 0.4s transform ease-in-out 0s;
	inset-block-end: 1px;
}
article button:hover .fa {
	transform: scale(1.5, 1.5);
}
article div.box,
article section.box {
	padding-block: 1rem;
	padding-inline: 1rem;
	background-color: var(--section-background-color);
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--section-heading-background-color) inset;
}
.cart article .preferences.box {
	background: rgba(255, 255, 255, 0);
}
article div.box h2:first-child,
article section.box h2:first-child,
article div.box h3:first-child,
article section.box h3:first-child {
	background-color: var(--section-heading-background-color);
	margin-block: -1rem 0.8em;
	margin-inline: -0.9em;
	padding-block: 0.3rem;
	padding-inline: 1rem;
	border-radius: 2px 2px 0 0;
	color: var(--background-color);
}
article div.box p:last-child,
article section.box ul:last-child {
	margin-block-end: 0;
}
form .error input,
form .error select,
form .error textarea {
	box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
}
form li .error {
	font-size: 0.9em;
	position: absolute;
	margin-block: 0;
	margin-inline: -3px 0;
	height: 1.4em;
	background-color: rgba(255, 0, 0, 0.8);
	overflow: hidden;
	padding-block: 3px;
	padding-inline: 3px;
	line-height: 100%;
	border-radius: 3px;
	cursor: pointer;
}
#domain-search-form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
#domain-search-form p {
	margin-block-start: 0;
	margin-block-end: 0.7rem;
}
#domain-search-form .domain-alias {
	flex: 2 0 70%;
	order: 1;
}
#domain-search-form .domain-button {
	flex: 1 0 20%;
	display: grid;
	order: 3;
}
#domain-search-form .domain-tlds {
	font-size: 0.88em;
	flex: 3 0 100%;
	order: 2;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-block-end: 0.3rem;
	line-height: 130%;
}
#domain-search-form .domain-tlds label {
	flex: 0 0 2%;
	display: inline-flex;
	margin-block: 0 0.4rem;
	margin-inline: 0.4rem;
	padding-block: 0;
	padding-inline: 0.1rem 0.25rem;
	transition: 0.2s color linear, 0.2s background-color linear, 0.2s border linear, 0.2s opacity linear; 
}
#domain-search-form input[type=search] {
	text-transform: lowercase;
}
#domain-search-form .domain-tlds label:first-child {
	margin-inline-start: 0;
}
#domain-search-form .domain-tlds input,
#domain-search-form .select input,
.cart .preferences .preference,
#checkout-form .options .preference  {
	opacity: 0;
}
.cart .preferences .fa-square,
.cart .preferences .fa-check,
#checkout-form .options .fa-square,
#checkout-form .options .fa-check,
#domain-search-form .domain-tlds .fa,
#domain-search-form .select .fa,
#domain-search-form .domain-tlds .fa-square,
#domain-search-form .select .fa-square {
	margin-block: 0.2em 0;
}
#domain-search-form .domain-tlds .fa,
#domain-search-form .select .fa,
.cart .preferences .fa-square,
#checkout-form .options .fa-square,
.cart .preferences .fa-check,
#checkout-form .options .fa-check {
	width: 1rem;
	margin-inline: -1rem 0;
	font-size: 0.8rem;
	line-height: 120%;
	display: inline-block;
	transition: 0.2s color linear, 0.2s text-stroke linear, 0.2s opacity linear; 
}
#domain-search-form .domain-tlds .fa-square,
#domain-search-form .select .fa-square,
.cart .preferences .fa-square,
#checkout-form .options .fa-square {
	color: rgba(255, 255, 255, 0);
	-webkit-text-stroke: 1px var(--accent-light-color);
	-moz-text-stroke: 1px var(--accent-light-color);
	text-stroke: 1px var(--accent-light-color);
}
#domain-search-form .domain-tlds label:last-child,
.cart .preferences label:last-child,
#checkout-form .options label:last-child {
	margin-inline-end: 0;
}
#domain-search-form .domain-results {
	flex: 3 0 100%;
	order: 4;
}
#domain-search-form .domain-result,
#domain-search-form .domain-result-action {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding-block: 4px;
	padding-inline: 0;
	border-bottom: 1px dotted var(--highlight-background);
}
#domain-search-form .domain-result-action {
	background-color: rgba(0, 120, 185, 0.2);
	border-bottom: 0 none;
	padding-block: 4px;
	padding-inline: 4px 0;
}
#domain-search-form .domain-result.selected,
#domain-search-form .domain-result.selected .status {
	color: var(--background-color);
}
#domain-search-form .domain-result.selected {
	background-color: var(--highlight-background);
	box-shadow: 0 -1px 0 var(--background-color);
}
#domain-search-form .whois-result {
	color: rgba(70, 70, 70, 0.95);
	background-color: rgba(162, 162, 162, 0.08);
	border: 1px solid rgba(70, 70, 70, 0.25);
	margin-block-end: 0.4em;
	padding-block: 0.7em;
	padding-inline: 1em;
	border-radius: 0 0 8px 8px;
	position: relative;
}
#domain-search-form .domain-result .select {
	flex: 1 0 10%;
	order: 1;
}
#domain-search-form .domain-result .domain-name {
	margin-block-start: 0;
	flex: 5 0 50%;
	order: 2;
}
#domain-search-form .domain-result .status {
	flex: 10 0 100%;
	margin-block-start: -1rem;
	color: var(--accent-color);
	font-size: 0.9em;
	order: 4;
}
#domain-search-form .domain-result .action {
	flex: 5 0 40%;
	text-align: end;
	order: 3;
}
#domain-search-form .domain-result.checking .select .fa {
	opacity: 0.3;
}
#domain-search-form .domain-result .button,
#domain-search-form .domain-result-action .button {
	font-size: 0.9rem;
	padding-block: 0.1rem 0.1rem;
	padding-inline: 1.2rem 1.6rem;
	min-width: 5em;
	box-shadow: 0 0 0 1px var(--background-color) inset;
	position: relative;
	transition: 0.2s border linear, 0.2s color linear, 0.2s background-color linear, 0.2s box-shadow ease-in-out, 0.3s right ease-in-out;
}
#domain-search-form .domain-result-action .button {
	padding-block: 0.1rem;
	padding-inline: 0.9rem 1.4rem;
}
#domain-search-form .domain-result .select label,
#domain-search-form .domain-result .domain-name label {
	display: block;
}
#domain-search-form .domain-result .select label {
	padding-block: 0.2em;
	padding-inline: 0.2em;
	text-align: center;
}
#domain-search-form .domain-result .status.checking {
	opacity: 0.8;
}
#domain-search-form .domain-result .button .fa-chevron-down {
	transition: 0.3s transform ease-in-out;
}
#domain-search-form .domain-result .button:hover .fa-chevron-down {
	transform: rotate(180deg);
}
.whois-result .created,
.whois-result .expires,
.whois-result .nameservers,
.whois-result .result {
	display: block;
}
.whois-result .field {
	color: rgba(30, 30, 30, 0.95);
	width: 9rem;
	text-overflow: ellipsis;
	display: inline-block;
	height: inherit;
	line-height: 100%;
	padding-block-end: 0.2em;
	margin-block: 0.2em;
	margin-inline: 0;
	position: relative;
	inset-block-start: 3px;
	white-space: nowrap;
	overflow: hidden;
	border-bottom: 1px dotted rgba(130, 130, 130, 0.75);
}
.whois-result .nameservers .nameserver {
	display: block;
	margin-inline-start: calc(9rem + 4px);
}
.whois-result .nameservers .nameserver:nth-child(2) {
	display: inline-block;
	margin-inline-start: 0;
}
.whois-result .result {
	background-color: rgba(230, 230, 230, 0.45);
	box-shadow: 0 0 0 1px rgba(130, 130, 130, 0.65) inset;
	display: block;
	max-height: 21em;
	overflow: auto;
	line-height: 1.2em;
	height: inherit;
	font-size: 0.85em;
	margin-block: 0.1rem 0.4rem;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0.5em;
}
.whois-result .result .field {
	padding: 0;
	box-shadow: none;
	width: calc(16rem - 0.3em);
	border: 0 none;
}
.field .error-notify {
	position: relative;
	background-color: rgba(155, 0, 0, 0.8);
	color: #FFFFFF;
	float: inline-end;
	inset-block-start: 1.7em;
	margin-block: 0 -1em;
	margin-inline: -1em 0;
	padding-block: 2px;
	padding-inline: 3px;
	border-radius: 0 0 0 5px;
}
.field .error-message {
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 120%;
	color: #fff;
	background-color: rgba(130, 0, 0, 0.8);
	position: absolute;
	margin-block: 0;
	margin-inline: auto;
	width: 90%;
	max-width: 300px;
	transform: translateX(40%);
	padding-block: 1px;
	padding-inline: 4px;
	text-shadow: 0 1px 0 #000;
	cursor: pointer;
	border-radius: 3px;
	z-index: 3000;
}
form.contact #back-button,
form.contact .hidden-field {
	display: none;
}
p + p.buttons:last-child {
	margin-block-start: 2rem;
}
form.contact .buttons button,
form.hosting .buttons button,
form.checkout .buttons button {
	display: inline-block;
	width: auto;
}

/* HEADER, NAVIGATION, SEARCH */

header > * {
	margin-block: 0 0.9em;
	margin-inline: auto;
}
#logo,
#logo-wide {
	transform-origin: 0 0;
	transition: 0.3s width ease-in-out 0s, 0.3s max-width ease-in-out 0s, 0.5s top ease-in-out 0.2s, 0.5s left ease-in-out 0.2s, 0.5s transform ease-in-out 0.2s, 0s visibility linear 0.7s;
}
#logo {
	position: absolute;
	inset-block-start: 0;
	width: 60%;
	inset-inline-start: 0;
	max-width: 220px;
}
#logo-wide {
	position: fixed;
	inset-inline-start: -130px;
	inset-block-start: 6%;
	width: 130px;
}
#logo a,
#logo-wide a {
	display: block;
}
#logo img,
#logo-wide img {
	object-fit: contain;
	color: var(--background-color);
}
#logo img {
	aspect-ratio: 220 / 91;
}
#logo-wide img {
	aspect-ratio: 158 / 382;
}
#skip {
	color: var(--background-color);
	background: var(--link-color);
	inset-inline-start: 50%;
	padding: 14px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;
	border-radius: 0 0 5px 5px;
	z-index: 510;
}
#skip:focus {
	transform: translateY(0%);
}
#skip:hover {
	background: var(--link-hover-color);
}
header nav {
	text-transform: uppercase;
	font-size: 0.8rem;
	background-color: var(--background-color);
	margin-block: 0;
	margin-inline: auto 0;
	border-bottom: 2px solid var(--menu-color);
	border-left: 2px solid var(--menu-color);
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
}
header nav li {
	margin: 0;
	padding: 0;
	position: relative;
}
header nav li li {
	display: block;
}
header nav .down {
	display: inline-block;
	position: relative;
	inset-block-end: 1px;
	font-size: 0.95em;
}
header img {
	width: 100%;
	height: auto;
}
header nav a {
	display: block;
	padding-block: 0.2rem;
	padding-inline: 0.8rem;
	transition: 0.1s color linear, 0.3s box-shadow linear, 0.3s background-color linear, 0.3s padding linear;
}
header nav .cart .name {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin-block: -1px 0;
	margin-inline: -1px 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
}
header nav .cart a::before,
header nav .account a::before {
	font-family: FontAwesome;
	width: 1em;
	display: inline-block;
	margin-inline-end: 0.1rem;
	font-size: 1.2rem;
	line-height: 0.9rem;
	position: relative;
	inset-block-start: 0.1rem;
	text-align: start;
}
header nav .cart a::before {
	content: '\f07a';
}
header nav .account a::before {
	content: '\f023';
}
header nav .level-1,
header nav .level-2,
header nav .level-3 {
	position: absolute;
	z-index: 10;
	padding: 0;
	opacity: 0;
	transition: 0.3s opacity linear 0s, 0.3s transform ease-out 0s;
	transform-origin: top center;
	font-size: 0.95em;
	transform: scale(1,0);
	visibility: hidden;
	line-height: 110%;
}
header nav .children:hover .level-1,
header nav .children .level-1:hover .level-2,
header nav .children .level-2:hover .level-3 {
    display: block;
	opacity: 1;
	transform: none;
	visibility: visible;
	background-color: var(--background-color);
	border: 2px solid var(--menu-color);
}
header nav .level-1 a,
header nav .level-2 a,
header nav .level-3 a {
	display: block;
	padding-block: 0.4em;
	padding-inline: 0.2em;
}
header nav .level-1 li:first-child a,
header nav .level-2 li:first-child a,
header nav .level-3 li:first-child a {
	padding-top: 0.6em;
}
header nav .level-1 li:last-child a,
header nav .level-2 li:last-child a,
header nav .level-3 li:last-child a {
	padding-bottom: 0.6em;
}
header nav,
header nav > ul {
	transition: 0.3s all ease-in-out 0s;
}
footer #menu-footer-social a {
	min-width: 0;
	line-height: 23px;
	text-align: center;
	font-size: 13px;
	height: 23px;
	width: 23px;
}

/* CONTENT */

article > * {
	margin-block: 0.2rem 1rem;
	margin-inline: auto;
}
section.full-width > h1,
section.full-width > h2,
section.full-width > h3,
section.full-width > h4,
section.full-width > div,
section.full-width > ul,
section.full-width > ol,
section.full-width > p,
section.full-width > table {
	margin-block: 0.2rem 0;
	margin-inline: auto;
}
section.full-width > h1,
section.full-width > h2,
section.full-width > h3,
section.full-width > h4,
section.full-width > div,
section.full-width > ul,
section.full-width > ol,
section.full-width > p,
section.full-width > table {
	max-width: 1020px;
	margin-block: 0.2rem 0;
	margin-inline: auto;
}
article > * {
	max-width: 1020px;
	overflow: hidden;
}
section.full-width {
	margin-block: 0 1rem;
	margin-inline: -1rem;
	max-width: none;
	padding-block: 1rem;
	padding-inline: 1rem;
}
section.highlight,
section.highlight h1,
section.highlight h2,
section.highlight h3,
section.highlight h4,
section.highlight div,
section.highlight ul,
section.highlight ol,
section.highlight p,
section.highlight table,
section.highlight a,
section.highlight a:visited,
section.highlight a:active,
section.highlight a:hover {
	color: var(--highlight-color);
}
section.highlight {
	background-color: var(--highlight-background);
}
section.highlight a:hover {
	text-decoration: underline;
}
section h1,
section h2,
section .h1,
section .h2,
#contents .h2,
#contents .h3,
#faq h3 {
	text-transform: uppercase;
}
section h1,
section h2,
section .h1,
section .h2 {
	font-size: 1.55rem;
	margin-block: 0 0.2rem;
	margin-inline: 0;
	padding-block: 0.4em;
	padding-inline: 0;
	text-align: start;
	line-height: 100%;
}
section h2,
section .h2 {
	font-size: 1.4rem;
}
section p,
section ul,
section ol,
section .summary div,
section > #list h3,
section > #list p {
	transition: 0.2s margin ease-in-out, 0.2s padding ease-in-out, 0.2s height ease-in-out;
}
section h1 + p,
section h1 + ul,
section h1 + ol,
section h2 + p,
section h2 + ul,
section h2 + ol {
	padding-block-start: 0.6em;
}
section ul {
	list-style: none;
}
article > .actions {
	margin-block: 0 1rem;
	margin-inline: auto;
	text-align: center;
}
h1 .icon,
h2 .icon,
h3 .icon,
p .icon,
li .icon {
	width: min(3em, 28%);
	height: auto;
	display: inline-block;
	vertical-align: middle;
	margin-block: 0;
	margin-inline: 0 0.5em;
}
h1 .icon {
	float: left;
	float: inline-start;
}
h1 .icon + .category,
h1 .icon + .prefix,
.h1 .icon + .categpry,
.h1 .icon + .prefix {
	margin-block-start: min(1.1rem, 1vh);
}
section .related-links:nth-child(2) {
	position: relative;
	margin-block: -3.4em 0.2em;
	margin-inline: 0 -0.6em;
	height: 3em;
	text-align: end;
	float: inline-end;
}
section .related-links:nth-child(2) ul {
	margin-block-start: 0.3rem;
}
section .related-links:nth-child(2) li {
	flex: 1 0 auto;
	flex-wrap: wrap;
	opacity: 0;
	transition: 0.3s linear opacity;
}
section:hover .related-links:nth-child(2) li {
	opacity: 1;
}
section .related-links:nth-child(2) li a {
	display: inline-block;
	padding-block: 0.2em;
	padding-inline: 0.6em;
	background-color: var(--section-heading-background-color);
}
section .related-links:nth-child(2) li + li::before {
	content: '|';
	color: var(--link-color);
}
#content #reviews > .reviews {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	padding-inline: 0;
}
#reviews li {
	flex: 1 0 100%;
	border-radius: 4px;
	padding-inline: 0;
	margin-inline: 0;
	box-shadow: 0 0 2px 0 var(--accent-color) inset;
	padding-block: 0.4rem;
	padding-inline: 1.4rem;
}
#reviews h4 {
	line-height: 130%;
	margin-block-end: 0.5rem;
}
#reviews .rating-author {
	margin-block-end: 0;
}
#reviews .rating-author a:nth-child(1) {
	color: rgba(255, 200, 8, 0.97);
	font-size: 1.1rem;
}

/* MESSAGES */

#messages,
#message-overlay {
	padding: 1rem;
	position: fixed;
	inset-inline-start: 0;
	inset-block-start: 0;
	inset-block-end: 0;
	inset-inline-end: 0;
}
#message-overlay {
	height: 100%;
	margin: 0;
	z-index: 98;
}
#messages,
#message-confirm,
#message-title {
	position: absolute;
	z-index: 100;
}
#messages {
	inset-block-start: 1px;
	display: none;
	z-index: 100;
}
#message-title,
#message-confirm,
#messages .message {
	border-radius: 3px;
	box-shadow: 4px 4px 22px rgba(0, 0, 0, 0.5);
	max-width: 1176px;
	min-height: 16px;
	margin-block: 0;
	margin-inline: auto;
	padding-block: 12px;
	padding-inline: 0.5%;
	text-align: center;
	width: 99%;
	clear: both;
	position: relative;
	opacity: 0;
}
#message-confirm,
#messages .message {
	background-color: var(--background-color);
	margin-block: 0 8px;
	margin-inline: auto;
	border-radius: 3px;
}
#message-title {
	border-radius: 3px 3px 0 0;
	z-index: 99;
	margin-block-end: -2px;
	padding-block-end: 14px;
}
#message-confirm p {
	margin-block: 20px;
	margin-inline: 0;
}
#message-confirm button {
	margin-block: 0;
	margin-inline: 8px;
	padding-block: 10px;
	padding-inline: 40px;
}

/* CART */

table.cart {
	width: 100%;
	max-width: 900px;
	margin-block: 1rem;
	margin-inline: auto;
}
.cart table.cart,
.checkout table.cart {
	max-width: none;
}
table.cart th:first-child,
table.cart td:first-child,
table.cart th:nth-child(2),
table.cart td:nth-child(2) {
	text-align: start;
}
table.cart th,
table.cart td,
table.cart tfoot th:last-child,
table.cart tfoot td:last-child,
table.cart th:last-child:nth-child(2),
table.cart td:last-child:nth-child(2) {
	text-align: end;
}
table.cart th,
table.cart td {
	box-shadow: 0 -1px 0 0 var(--highlight-background) inset;
	text-align: end;
	padding-block: 0.7em;
	padding-inline: 0.3em;
}
table.cart thead th {
	box-shadow: 0 -2px 0 0 var(--highlight-background) inset;
	font-weight: 700;
}
table.cart tfoot th,
table.cart tfoot td {
	box-shadow: 0 1px 0 0 var(--highlight-background) inset, 0 -2px 0 0 var(--highlight-background) inset;
	font-weight: 700;
}
.cart table.cart tfoot th,
.cart table.cart tfoot td,
.checkout table.cart tfoot th,
.checkout table.cart tfoot td {
	box-shadow: 0 -1px 0 0 var(--highlight-background) inset;
}
.cart table.cart tfoot tr:last-child th,
.cart table.cart tfoot tr:last-child td,
.checkout table.cart tfoot tr:last-child th,
.checkout table.cart tfoot tr:last-child td {
	box-shadow: 0 -2px 0 0 var(--highlight-background) inset, 0 1px 0 0 var(--highlight-background) inset;
}
.cart .preference td {
	background-color: #f1f6ff;
}
table.cart tfoot th,
table.cart tfoot td {
	font-weight: 700;
}
.cart .remove {
	display: inline-block;
	cursor: pointer;
	padding-block: 0.3em;
	padding-inline: 0.3em;
	opacity: 0.7;
}
.cart .remove:hover {
	opacity: 1;
}
.cart tr td:first-child > .remove {
	padding-inline-start: 0;
}
.cart .quantity select {
	border: 1px solid #8f8f8f;
	text-align: end;
	font-size: 1em;
}
table.cart td.empty,
table.cart td:first-child:last-child {
	width: 100%;
	text-align: center;
	color: rgba(0, 0, 0, 0.7);
	height: 3.2em;
}
.cart .preferences h2 {
	font-size: 1.1rem;
	margin-block-end: 0.6em;
}
.cart .preferences .options,
#checkout-form .options,
.cart #preference-domains-existing {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.cart .preferences .options label,
#checkout-form .options label {
	display: inline-flex;
	flex: 1 0 20%;
	margin-block: 0;
	margin-inline: 0 0.4rem;
	padding-block: 0.25rem 0.3rem;
	padding-inline: 0.15rem 0.45rem;
	transition: 0.2s color linear, 0.2s background-color linear, 0.2s box-shadow linear, 0.2s border linear, 0.2s opacity linear, 0.4s transform ease-out 0.2s;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0) inset;
}
.cart .preferences .options label:last-child,
#checkout-form .options label:last-child {
	margin-inline-end: 0;
}
.cart .preferences .options label:hover,
#checkout-form .options label:hover,
.cart .preferences .options label.activated:hover,
#checkout-form .options label.activated:hover {
	box-shadow: 0 0 0 1px var(--accent-color) inset;
}
.cart .preferences .options .activated,
#checkout-form .options .activated {
	transform: scale(1.3, 1.3);
}
.cart .preferences .fa-square,
#checkout-form .options .fa-square,
.cart .preferences .fa-check,
#checkout-form .options .fa-check {
	width: 1.2rem;
	margin-block: 0;
	margin-inline: -1.2rem 0.35rem;
	font-size: 1rem;
}
.cart .preferences .fa-chevron-right:last-child,
#checkout-form .options .fa-chevron-right:last-child,
.cart .preferences .fa-chevron-down:last-child,
#checkout-form .options .fa-chevron-down:last-child,
.cart .preferences .fa-chevron-left:last-child,
#checkout-form .options .fa-chevron-left:last-child {
	display: inline-block;
	margin-block: auto;
	margin-inline: 0.5em 0;
}
.cart #preference-domains .options {
	margin-block-end: 0;
}
#preference-domains-existing {
	margin-block: 0;
	margin-inline: 0;
	line-height: 140%;
	opacity: 0;
	display: flex;
	height: 1px;
	transition: 0.2s opacity linear 0.2s, 0.3s margin ease-out 0.1s, 0.3s height ease-out 0.05s, 0.3s transform ease-out 0.1s;
	overflow: hidden;
}
#preference-domains-existing.activated {
	height: auto;
	opacity: 1;
	margin-block: 0.8rem 0;
	margin-inline: 0;
	transition: 0.2s opacity linear, 0.3s margin ease-out 0.2s, 0.3s height ease-out 0.2s, 0.3s transform ease-out 0.2s;
}
#preference-domains-existing label,
#preference-domains-existing input {
	display: inline-flex;
	flex: 1 0 30%;
}
#preference-domains-existing input {
	flex: 2 0 60%;
	margin-inline-end: 0;
}
.cart .quantity input[type=number],
#checkout-form .quantity input[type=number] {
	width: 3em;
}

/* FOOTER */

footer div,
footer nav ul {
	margin-block-end: 0.5rem;
}
footer div:last-child,
footer nav ul:last-child {
	margin-block-end: 0;
}
footer nav li {
	display: inline-block;
}
footer nav li + li::before {
	content: '|';
	display: inline-block;
	padding-block: 0;
	padding-inline: 0.2em;
	font-size: 0.97em;
	position: relative;
	inset-block-end: 1px;
	opacity: 0.9;
}
footer nav a {
	transition: 0.3s color linear, 0.3s background-color linear;
}
footer nav .down {
	display: none;
}
footer p {
	text-align: center;
	font-size: 0.7rem;
	margin-block-end: 0.8rem;
}
footer .logo {
	max-width: 300px;
	margin-block: 0 0.3rem;
	margin-inline: auto;
	width: 100%;
}
footer .social-media nav li + li::before {
	content: '';
	display: none;
}
footer .social-media nav {
	font-size: 1.4rem;
}
footer .logo a img {
	transition: 0.2s linear filter;
}
footer .social-media a {
	display: block;
	max-width: 240px;
	margin-block: 0;
	margin-inline: auto;
}
footer .logo a {
	max-width: 190px;
}
footer .social-media .icon-x {
	width: 18px;
	height: 18px;
	display: inline-block;
	background: transparent url("data:image/svg+xml;charset=UTF-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjY4LjU2IDEyMjEuMTkiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGIiBkPSJtMzM2LjMzMDA4OCAxNDIuMjUxNDAzIDM4Ni4zOSA1MTYuNjQtMzg4LjgzIDQyMC4wNWg4Ny41MWwzNDAuNDItMzY3Ljc2IDI3NS4wNSAzNjcuNzZoMjk3LjhsLTQwOC4xMy01NDUuNyAzNjEuOTItMzkwLjk5aC04Ny41MWwtMzEzLjUxIDMzOC43LTI1My4zMS0zMzguN2gtMjk3Ljh6bTEyOC42OSA2NC40NmgxMzYuODFsNjA0LjEzIDgwNy43NmgtMTM2LjgxbC02MDQuMTMtODA3Ljc2eiIvPgo8L3N2Zz4=") no-repeat scroll 50% 50% / 100%;
	position: relative;
	margin-block: 0 -4px;
}

/* SPECIFIC */

.hosting.table.full-width {
	margin-block: 0 1rem;
	margin-inline: -1rem;
	max-width: none;
	padding: 0;
}
.hosting.table.full-width > ul > li {
	padding: 1rem;
	box-shadow: 0 -2px 0 0 var(--accent-color) inset;
}
.hosting.table .box {
	display: none;
}
.hosting.table.full-width h2 {
	padding-inline: 1rem;
	margin-block-start: 0.9rem;
}
.hosting.table > ul > li:nth-child(2n) {
	background-color: rgba(255, 255, 255, 0.12);
}
.hosting.table .header {
	border-bottom: 2px solid var(--accent-color);
	margin-block-end: 0.5rem;
}
.hosting.table.highlight .header {
	border-bottom-color: var(--background-color);		
}
.hosting .hosting.table .header {
	border-bottom-color: var(--link-color);
}
.hosting.table .header h3 {
	font-size: 1.2em;
	margin-block: 0 0.3rem;
	position: relative;
	z-index: 1;
	line-height: 1.72rem;
}
.hosting.table > ul {
	margin-block-start: 0;
	padding-block-start: 0;
}
.hosting.table ul ul {
	margin: 0;
	padding: 0;
}
section.hosting .name,
section.hosting .value,
section.hosting li li {
	line-height: 1.25rem;
}
section.hosting p {
	margin-block: 0.2rem;
	margin-inline: 0;
}
section.hosting li li,
section.hosting li li {
	overflow: hidden;
	font-size: 0.95em;
	margin-block: 0 0.3rem;
	margin-inline: 0;
}
section.hosting .name {
	opacity: 0.8;
}
section.hosting .price-month .value a:first-child,
section.hosting .price-year .value a:first-child,
section.hosting .price .value a:first-child,
section.hosting .price-12 .value a:first-child {
	display: inline-block;
	min-width: 3em;
}
section.hosting .price-month .value,
section.hosting .price-year .value,
section.hosting .price .value,
section.hosting .price-12 .value {
	font-size: 1.3em;
}
section.hosting .unit {
	font-size: 0.8em;
}
section.hosting .unlimited {
	font-size: 1.5em;
	line-height: 1rem;
}
.hosting.table .button {
	padding-block: 0;
	padding-inline: 0.5rem;
	width: auto;
	min-width: 5rem;
	line-height: inherit;
	opacity: 0;
	font-size: 0.88rem;
	height: 1.65rem;
	transition: 0.2s opacity linear 0.2s;
	line-height: 1.7rem;
	display: none;
}
.hosting.table li li:hover .button {
	transition: 0.2s opacity linear 0s;
	opacity: 1;
}
#hosting-form .hosting-options,
#hosting-form .frequency-options {
	display: none;
}
#hosting-form .hosting,
#hosting-form .frequency {
	border-bottom: 2px solid var(--accent-color);
}
#hosting-form .hosting .label,
#hosting-form .frequency .label {
	display: inline-block;
	min-width: 8em;
}
#hosting-form .hosting .change,
#hosting-form .frequency .change {
	text-align: end;
	float: inline-end;
}
#hosting-form .hosting .change .fa,
#hosting-form .frequency .change .fa {
	width: 1rem;
}
#hosting-form .hosting-options,
#hosting-form .frequency-options {
	text-align: end;
	margin: -1.1em 0 0 auto;	
}
#hosting-form .hosting-options li a,
#hosting-form .frequency-options li a {
	display: block;
	padding-block: 0.2rem;
	padding-inline: 1rem;
	border-bottom: 2px solid var(--accent-color);
}
.wordpress-plugins {
	margin-block-end: 1.5rem;
}
.wordpress-plugins li + li {
	margin-block-start: 1.3rem;
}
.wordpress-plugins h3,
.wordpress-plugins p {
	margin-block: 0;
	line-height: 160%;
}
.wordpress-plugins h3 {
	margin-block-end: 0.5rem;
}
.wordpress-plugins .icon {
	float: inline-start;
	margin-inline-end: 1.5rem;
	margin-block: 0.4rem 0.9rem;
}
.wordpress .features li li {
	list-style: square;
	padding-inline-start: 0.4em;
	margin-inline-start: 0.9rem;
}
.wordpress #setup .hide,
.wordpress #setup .hide + #api-key-guide-navigation {
	display: none;
}
.wordpress #setup ol {
	list-style: decimal;
	padding-inline-start: 0.8rem;
	margin-inline-start: 0.3rem;
}
.wordpress #setup .api-key-setup,
.wordpress #setup .api-key-setup ol {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
}
.wordpress #setup .api-key-setup {
	margin-block-start: 2.1rem;
}
.wordpress #setup #api-key-guide-navigation ol {
	list-style: lower-alpha;
	margin-inline: -1.65rem 0;
	padding-inline-start: 0;
	display: initial;
}
.wordpress .api-key-setup .button {
	display: block;
	margin-block-start: 0.9rem;
}
.wordpress .api-key-setup .summary {
	display: none;
}
.wordpress .api-key-setup li + li {
	margin-block-start: 0.8rem;
}
.wordpress .api-key-setup li > * {
	vertical-align: text-top;
}
.wordpress .api-key-setup figcaption {
	margin-block-end: 0.8rem;
}
.wordpress .api-key-setup img {
	border-radius: 0.27rem;
	overflow: hidden;
	box-shadow: 0 0 0.4rem 1px rgba(30, 30, 30, 0.2);
	max-height: 22rem;
	object-fit: cover;
	object-position: 0 0;
	transition: 0.3s max-height ease-in-out;
}
.wordpress .api-key-setup > li:nth-child(3) li:nth-child(3) img {
	max-height: 36rem;
}
.wordpress .api-key-setup > li:nth-child(5) li:nth-child(1) img {
	max-height: 31rem;
}
.wordpress .api-key-setup > li:nth-child(5) li:nth-child(2) img {
	max-height: 48rem;
}
.wordpress .api-key-setup > li:nth-child(5) li:nth-child(3) img {
	max-height: 38rem;
}
.wordpress .api-key-setup > li:nth-child(6) li:nth-child(1) img,
.wordpress .api-key-setup > li:nth-child(6) li:nth-child(4) img {
	max-height: none;
}
.wordpress .api-key-setup > li:nth-child(6) li:nth-child(2) img,
.wordpress .api-key-setup > li:nth-child(6) li:nth-child(3) img {
	max-height: 45rem;
}
.wordpress .api-key-setup > li:nth-child(7) li:nth-child(2) img {
	max-height: 36rem;
}
.wordpress #setup #api-key-guide-navigation,
.wordpress #setup #api-key-guide-navigation ol {
	position: relative;
	z-index: 1400;
}
.wordpress #setup #api-key-guide-navigation li {
	color: var(--accent-light-color);
	display: list-item;
	display: inline list-item;
	margin-inline: 0.1rem;
	padding-block: 0.2rem;
	padding-inline: 0.55rem 0.08rem;
	box-shadow: 0 -2px 0 0 var(--accent-light-color) inset;
	transition: 0.3s color linear, 0.3s background-color linear, 0.3s box-shadow linear;
}
.wordpress #setup #api-key-guide-navigation li a {
	color: transparent;
	display: inline-block;
	width: 1.5rem;
	margin-inline-start: -1.6rem;
	height: 1.1rem;
	line-height: 1rem;
}
.wordpress #setup #api-key-guide-navigation li:hover {
	background-color: #006aac1f;
}
.wordpress #setup #api-key-guide-navigation li.current,
.wordpress #setup #api-key-guide-navigation li.current:hover {
	color: var(--background-color);
	background-color: var(--accent-light-color);
}
.wordpress #setup #api-key-guide-navigation .children:not(:hover) li::marker {
	color: rgba(98, 129, 166, 0.58);
}
.wordpress #setup #api-key-guide-navigation .children:hover::marker,
.wordpress #setup #api-key-guide-navigation .children:not(:hover) li:first-child::marker {
	color: transparent;
}
.wordpress #setup #api-key-guide-navigation .children.current:hover::marker,
.wordpress #setup #api-key-guide-navigation .children:not(:hover) li.current::marker {
	color: var(--background-color);
}
.wordpress #setup #api-key-guide-navigation .children li {
	box-shadow: 2px 0 0 0 var(--accent-light-color) inset;
	margin-inline: 0;
}
.wordpress #setup #api-key-guide-navigation .children li:first-child {
	box-shadow: none;
	margin-inline-start: 0.2rem;
}
article > .portfolio {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	padding-inline: 0;
	padding-block-start: 5px;
	list-style: none;
}
article > .portfolio .item {
	flex: 1 0 20rem;
	padding-block: 0 1.4rem;
	padding-inline: 1.3rem;
	margin: 0;
	background-color: rgba(234, 234, 234, 0.5);
	border-radius: 3px;
	box-shadow: 0 0 0 3px rgba(234, 234, 234, 0.1) inset;
	transition: 0.2s color linear, 0.2s background-color linear, 0.2s box-shadow linear, 0.4s transform ease-in-out;
	position: relative;
}
.portfolio .item .image:first-child:nth-last-child(2n+1) {
	flex: 1 0 100%;
}
article > .portfolio .item:hover {
	background-color: rgba(234, 234, 234, 0.6);
	box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.3) inset;
}
.portfolio .item p {
	line-height: 130%;
	font-size: 0.95em;
}
.portfolio .item ul {
	list-style: square;
	padding-inline-start: 1em;
	font-size: 0.9em;
	margin-block: 1.1rem;
}
.portfolio .item ul li {
	padding-inline-start: 0.3em;
}
.portfolio .item h3,
.portfolio .item h3 a {
	color: #FFFFFF;
}
.portfolio .item h3 {
	background-color: var(--link-color);
	margin-block: 0.1rem 0.3rem;
	margin-inline: -1.3rem;
	padding-block: 0.3rem;
	padding-inline: 1.3rem;
	box-shadow: 0 8px 2px -3px rgba(40, 40, 40, 0.1);
	font-size: 1.05rem;
	transition: 0.2s background-color linear, 0.2s box-shadow linear;
}
.portfolio .item:hover h3 {
	background-color: var(--link-hover-color);
}
.portfolio .item .fa,
.portfolio .item .archived {
	color: rgba(123, 123, 123, 0.6);
	margin-inline-end: 0.6em;
}
.portfolio .item h3 .fa {
	color: rgba(255, 255, 255, 0.7);
	float: right;
	float: inline-end;
	display: block;
	margin-block: 0.4rem 0;
	margin-inline: 0;
	position: relative;
	text-align: end;
	width: 1.2rem;
}
.portfolio .item .images {
	list-style: none;
	padding-inline: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}
.portfolio .item .images .image {
	flex: 1 0 40%;
	padding-inline: 0;
}
.portfolio .images a {
	cursor: default;
}
.portfolio .item .expand {
	display: none;
}
.portfolio .caption {
	line-height: 120%;
	font-size: 0.8rem;
	margin-block: -1.4rem;
	position: absolute;
	z-index: 400;
	color: rgba(105, 105, 105, 0.9);
	background-color: rgba(155, 155, 155, 0.9);
	padding-inline: 0.4rem;
	transform: scaleY(0);
	transform-origin: 0 100%;
	transition: 0.3s color linear, 0.3s background-color linear, 0.3s transform ease-in-out;
}
.portfolio .image:hover .caption {
	transform: none;
	color: #585858;
	background-color: rgba(255, 255, 255, 0.9);
}
.portfolio .reveal {
	opacity: 0;
	animation-play-state: paused;
}
.portfolio .animated {
	animation-duration: 0.6s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.portfolio .fade-in-up {
	opacity: 0;
	animation-name: fade-in-up;
}
.wordpress #faq {
	display: none;
}
#contents ul {
	margin-block: 0;
	padding-inline: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 1.4rem;
}
#contents li {
	flex: 1 0 14em;
	box-shadow: 0 0 0 2px var(--link-hover-color) inset;
	border-radius: 2px;
	padding: 1rem;
}
#faq ul,
#contents li ul {
	list-style: square;
	padding-inline-start: 1em;
	gap: 0.4rem;
}
#faq li,
#contents li li {
	flex: 1 0 100%;
	box-shadow: none;
	padding-block: 0;
	padding-inline: 0.3em 0;
	line-height: 140%;
	color: var(--link-color);
	font-size: 0.9rem;
}
#contents .section {
	margin-block: 0;
}
#contents a,
#faq a {
	display: block;
}
.support section ul,
.support section ol {
	margin-block: 0.9em 1.1em;
	padding-inline-start: 1em;
}
.support section ul {
	list-style: square;
}
.support section li {
	padding-inline: 0.3em 0;
}
#faq .inactive,
.support .inactive {
	color: var(--link-color);
	transition: 0.2s color linear;
}
#faq .active,
#faq .inactive:hover,
.support .active,
.support .inactive:hover {
	color: var(--color);
	transition: 0.2s color linear;
}
.support #contents ~ section h3 {
	font-size: 1.05rem;
	box-shadow: 0 -1px 0 0 var(--link-color);
	padding-block: 0.3rem;
	cursor: pointer;
}
#faq h3.active:nth-child(n+2),
.support #contents ~ section h3.active {
	box-shadow: 0 -2px 0 0 var(--link-color);
}
#faq .toggle,
.support section .toggle {
	color: var(--link-color);
	display: block;
	border: 1px solid;
	width: 1.4em;
	float: inline-end;
	text-align: center;
	height: 1.4em;
	line-height: 1.4em;
	margin-block-start: 0.1em;
	font-size: 0.9em;
	border-radius: 2px;
}
#faq .toggle:hover,
.support section .toggle:hover {
	color: var(--link-hover-color);
}
.contact .required {
	font-family: Helvetica, Arial, sans-serif;
	color: var(--accent-color);
	opacity: 0.5;
}
#contact-message {
	min-width: 50%;
	max-width: 100%;
	min-height: 2.6em;
	height: 9.8em;
	max-height: 80vh;
}
.contact #social + p a + a {
	margin-inline-start: 0.8rem;
}
.wordpress #content ul,
.contact #email + ul,
.contact #phone + ul,
.contact #instant-messaging + ul {
	list-style: square;
	padding-inline-start: 1em;
}
.wordpress section ul li,
.contact #email + ul li,
.contact #phone + ul li,
.contact #instant-messaging + ul li {
	padding-inline: 0.3em 0;
}
.contact #social + p a {
	display: inline-block;
	max-width: 2rem;
	max-height: 2rem;
}
.contact .icon-x {
	width: 32px;
	height: 32px;
	background-color: #000;
	border-radius: 2px;
}

/* POPUP */

#popup-image-overlay {
	position: fixed;
	inset-block-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	inset-inline-start: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1200;
}
#popup-image,
#popup-previous,
#popup-next {
	position: absolute;
}
#popup-image {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(142, 152, 180, 0.5);
	max-width: 95%;
	transform: translate(-50%, -50%);
	z-index: 1000;
}
#popup-image.svg {
	width: calc(100% - 15rem);
	box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(202, 202, 240, 0.7) inset;
}
#popup-image a {
	min-width: 80px;
	min-height: 60px;
	display: block;
	background-color: rgba(10, 12, 28, 0.8);
}
#popup-image.svg a {
	background-color: rgba(10, 12, 28, 0.9);
	padding: 1rem;
	margin: 4px;
}
#popup-image img {
	display: block;
	max-width: 100vw;
	max-height: 100vh;
}
#popup-image.svg img {
	width: 100%;
	height: auto;
}
#popup-image .caption {
	margin-block: -1.35rem 0;
	transform: none;
	transform-origin: 0 0;
	filter: invert(86%) hue-rotate(180deg);
	color: var(--color);
	background-color: var(--background-color);
	border-radius: 3px 3px 0 0;
	line-height: 150%;
	position: absolute;
	font-size: 0.9rem;
	padding-inline: 0.7rem;
	max-width: calc(100% - 1.4rem);
	transform: scaleY(0);
	transform-origin: 0 100%;
	transition: 0.3s color linear 0.4s, 0.3s background-color linear 0.4s, 0.3s transform ease-in-out 0.4s, 0.3s filter linear 0.4s;
	z-index: 700;
}
#popup-image #popup-close {
	position: absolute;
	background: rgba(128, 128, 128, 0);
	color: #fff;
	text-shadow: 0 2px 1px rgba(0, 0, 0, 0.8);
	min-width: 0;
	min-height: 0;
	margin-block: -1.7rem;
	display: block;
	inset-inline-end: -0.2rem;
	font-size: 1.6rem;
	opacity: 0.82;
	filter: grayscale(100%);
	transform: scaleX(0);
	transform-origin: 100% 100%;
	transition: 0.3s color linear 0.8s, 0.3s background-color linear 0.8s, 0.3s transform ease-in-out 0.8s, 0.3s filter linear 0.8s;
}

#popup-image.loaded .caption,
#popup-image.loaded #popup-close {
	transform: none;
}
#popup-image .no-image {
	display: block;
	color: rgba(157, 157, 157, 0.7);
	background-color: rgba(57, 57, 57, 0.8);
	text-align: center;
	padding: 4em 0 0;
	width: 18vh;
	height: 10vh;
	max-width: 400px;
	max-height: 300px;
}
#popup-previous,
#popup-next {
	height: 100vh;
	transition: 0.3s left ease-in-out, 0.3s right ease-in-out;
	inset-block-start: 0;
}
#popup-previous {
	inset-inline-start: 40%;
	z-index: 980;
}
#popup-next {
	inset-inline-end: 40%;
	z-index: 981;
}
#popup-previous a,
#popup-next a {
	width: 4rem;
	height: 4rem;
	color: rgba(255, 255, 255, 0);
	filter: invert(60%);
	display: block;
	transform: translateY(-50%);
	inset-block-start: 50%;
	position: relative;
	z-index: 500;
	transition: 0.3s transform ease-in-out, 0.2s opacity linear;
	transform-origin: 50% 0;
	opacity: 0.4;
	cursor: default;
}
#popup-previous .active,
#popup-next .active {
	filter: invert(100%);
	opacity: 0.9;
	cursor: pointer;
}
#popup-previous .active:hover,
#popup-next .active:hover {
	transform: scale(1.05, 1.05) translateY(-50%);
	opacity: 1;
}
#popup-previous .start,
#popup-previous .start,
#popup-next .start.active,
#popup-next .start.active {
	transform: scale(0.5, 0.5) translateY(-80%);
	opacity: 0.4;
}
#popup-previous a {
	background: url("data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxNzkyIDE3OTIiPgogIDxwYXRoIGQ9Ik0xMTI5LjI1NCAxMzc1LjU3NmwtNjUyLTY1MXEtMzctMzctMzctOTAuNXQzNy05MC41bDY1Mi02NTFxMzctMzcgOTAuNS0zN3Q5MC41IDM3bDc1IDc1cTM3IDM3IDM3IDkwLjV0LTM3IDkwLjVsLTQ4NiA0ODYgNDg2IDQ4NXEzNyAzOCAzNyA5MXQtMzcgOTBsLTc1IDc1cS0zNyAzNy05MC41IDM3dC05MC41LTM3eiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPg==") no-repeat 0 0 / 100%;
}
#popup-next a {
	background: url("data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxNzkyIDE3OTIiPgogIDxwYXRoIGQ9Ik0xNDQ4LjI4OCA2MjYuOTgzcTAgNTItMzcgOTFsLTY1MiA2NTFxLTM3IDM3LTkwIDM3dC05MC0zN2wtNzYtNzVxLTM3LTM5LTM3LTkxIDAtNTMgMzctOTBsNDg2LTQ4Ni00ODYtNDg1cS0zNy0zOS0zNy05MSAwLTUzIDM3LTkwbDc2LTc1cTM2LTM4IDkwLTM4dDkwIDM4bDY1MiA2NTFxMzcgMzcgMzcgOTB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+") no-repeat 0 0 / 100%;
}

/* SCREEN SIZE SPECIFIC */

@media screen and (width >= 300px) {
	section.hosting .name,
	section.hosting .value,
	section.hosting li li {
		white-space: nowrap;
		text-overflow: ellipsis;
		height: auto;
	}
	.hosting.table li li {
		line-height: 1.7rem;
		margin-block: 0 -2px;
		margin-inline: 0;
	}
	section.hosting .name,
	section.hosting .value {
		line-height: inherit;
		display: inline-block;
	}
	section.hosting .name {
		opacity: 1;
		width: calc(4rem + 25%);
	}
	section.hosting .value {
		width: calc(75% - 4.5rem);
	}
	section.hosting .unit {
		opacity: 0.87;
	}
}

@media screen and (width >= 600px) {
	#logo {
		width: calc(30% + 4rem);
	}
	.portfolio .images a {
		cursor: pointer;
	}
}

@media screen and (width >= 650px) {
	.whois-result .field {
		width: 16rem;
	}
	.whois-result .nameservers .nameserver {
		margin-inline-start: calc(16rem + 4px);
	}
}

@media screen and (width >= 768px) {
	body {
		padding-block: 0 15rem;
		padding-inline: 0;
	}
	header {
		min-height: 7rem;
	}
	header nav {
		width: auto;
	}
	header nav li {
		display: inline-block;
	}
	header nav a {
		padding-block: 0.4rem;
		padding-inline: 0.8rem;
	}
	header #menu-header {
		position: fixed;
		inset-inline-end: 0;
		inset-block-start: 0;
		z-index: 500;
	}
	header #menu-header {
		text-align: start;
	}
	header #menu-header > ul {
		display: flex;
	}
	header nav a {
		padding-block: 0.2rem;
		padding-inline: 0.6rem;
	}
	header #menu-header ul ul {
		text-align: center;
	}
	header nav li.current:first-child {
		display: inline-block;
	}
	article .buttons a,
	article .button a,
	article a.button {
		display: inline-block;
		padding-block: 0.3rem;
		padding-inline: 1.8rem;
	}
	article .buttons a + a {
		margin-inline-start: 0.7rem;
	}
	#domain-search-form .domain-result .select {
		flex: 1 0 5%;
		order: 1;
	}
	#domain-search-form .domain-result .domain-name {
		flex: 12 0 60%;
		order: 2;
	}
	#domain-search-form .domain-result .domain-name,
	#domain-search-form .domain-result .status {
		margin-block-start: 0.3rem;
	}
	#domain-search-form .domain-result .status {
		flex: 4 0 20%;
		font-size: 1em;
		order: 3;
	}
	#domain-search-form .domain-result .action {
		flex: 3 0 15%;
		order: 4;
	}
	#domain-search-form .domain-result .fa {
		min-width: 1em;
	}
	#domain-search-form .domain-result .action button {
		width: 100%;
	}
	#domain-search-form .domain-result.selected .action .button {
		inset-inline-end: 0.4em;
	}
	.cart .preferences .fa-check,
	#checkout-form .options .fa-check,
	.cart .preferences .fa-square,
	#checkout-form .options .fa-square {
		min-width: 1.1em;
	}
	#contact-message  {
		height: 5.8em;
	}
}

@media screen and (width >= 850px) {
	#logo {
		position: fixed;
	}
	header nav a {
		padding-block: 0.3rem;
		padding-inline: 0.9rem;
	}

	/* SPECIFIC */

	.hosting.table {
		padding-block-end: 0;
	}
	.hosting.table.full-width {
		padding-inline-start: 1rem;
		margin-block: 0 1rem;
		margin-inline: -1rem;
		max-width: none;
	}
	.hosting.table.full-width > ul > li {
		padding-block: 0.2rem 0;
		padding-inline: 0;
		box-shadow: none;
	}
	.hosting.table .box {
		display: block;
		width: 400px;
		height: 15rem;
		opacity: 0.2;
		border: 2px solid var(--accent-color);
		box-shadow: 0 0 0 2px var(--background-color);
		border-radius: 2px;
		padding: 1rem;
		background-color: rgba(255, 255, 255, 0.3);
		position: absolute;
		transition: 0.4s left ease-in-out, 0.4s opacity linear 0.1s, 0s linear visibility 0.4s;
		pointer-events: none;
		z-index: 50;
		inset-inline-start: 30%;
	}
	.hosting.table.highlight .box {
		border-color: var(--background-color);
		box-shadow: 0 0 0 2px var(--highlight-background);
	}
	.hosting.table .box.active {
		opacity: 1;
		transition: 0.4s left ease-in-out, 0.4s opacity linear 0.1s, 0s linear visibility 0s;
	}
	.hosting.table .link {
		cursor: pointer;
	}
	.hosting.table > ul {
		display: flex;
		flex-direction: row;
		flex-wrap: no-wrap;
		margin-block: 0;
		margin-inline: auto;
		padding-block: 0.6em 0;
	}
	.hosting.table h1,
	.hosting.table h2 {
		border-bottom: 2px solid var(--accent-color);
		position: absolute;
		display: block;
		color: rgba(0, 0, 0, 0);
		inset-inline-end: 0;
		width: 40%;
		z-index: 0;
		text-align: end;
		font-size: 1.4rem;
		line-height: 1.65rem;
	}
	.hosting.table.full-width h2 {
		margin-block: 0;
	}
	.hosting.table.highlight h1,
	.hosting.table.highlight h2 {
		line-height: 1.65rem;
	}
	.hosting.table.highlight h1,
	.hosting.table.highlight h2 {
		border-bottom-color: var(--background-color);
	}
	.hosting.table > ul > li {
		flex: 1 0 18%;
	}
	.hosting.table > ul > li:first-child {
		flex: 2 0 35%;
	}
	.hosting.table > ul > li:nth-child(2n) {
		background-color: rgba(255, 255, 255, 0);
	}
	.hosting.table li + li {
		margin-block-start: 0;
	}
	.hosting.table .header {
		margin-block-end: 0;
		margin-inline-end: -2rem;
	}
	.hosting .hosting.table .header {
		border-bottom-color: var(--accent-color);
	}
	section.hosting .name {
		width: 28%;
	}
	section.hosting .value {
		width: 68%;
	}
	section.hosting.table .name,
	section.hosting.table .value {
		width: 48%;
	}
	section.hosting.table .name {
		padding-inline-end: 1rem;
		border-right: 2px solid var(--accent-color);		
	}
	section.hosting.table.highlight .name {
		border-right-color: var(--background-color);		
	}
	section.hosting.table.hightlight .name {
		text-align: end;
	}
	.hosting.table li:first-child .header {
		margin-inline-start: 47.58%;
	}
	.hosting.table li li:nth-child(2) .name,
	.hosting.table li li:nth-child(2) .value {
		padding-block-start: 0.3rem;
	}
	.hosting.table li:first-child .header h3 {
		margin-inline-start: 1rem;
	}
	.hosting.table li:first-child .value {
		margin-inline-start: calc(1rem - 4px);
		width: calc(48% - 1rem);
	}
	.hosting.table li + li li .name,
	.hosting.table .colon {
		display: none;
	}
	.hosting.table li li:last-child .name,
	.hosting.table li li:last-child .value {
		padding-block-end: 1.4rem;
	}
	section.hosting .price-month,
	section.hosting .price-year,
	section.hosting .price,
	section.hosting .price-12 {
		line-height: 2rem;
	}
	.wordpress #setup .api-key-setup.flush,
	.wordpress #setup .api-key-setup.flush ol {
		list-style: none;
		margin-inline-start: 0;
		padding-inline-start: 0;
	}
	.wordpress .api-key-setup figcaption {
		position: relative;
		margin-inline-start: 32rem;
		margin-block-end: -10rem;
		height: 10rem;
	}
	.wordpress .api-key-setup .button {
		margin-block-start: 0.8rem;
		min-width: 0;
		width: clamp(8em, 100%, 14em);
	}
	.wordpress .api-key-setup .button.next {
		width: 2.4rem;
		padding-inline: 0.3rem;
		font-size: 0.7rem;
	}
	.wordpress .api-key-setup .summary {
		display: block;
		color: var(--accent-color);
		font-size: 1.08rem;
		margin-block-end: 0.9rem;
	}
	.wordpress .api-key-setup img {
		max-width: 30rem;
		filter: saturate(20%) brightness(110%);
		transition: 0.3s filter linear, 0.5s box-shadow linear;
	}
	.wordpress .api-key-setup li {
		padding-inline-start: 0;
	}
	.wordpress .api-key-setup > li {
		padding-inline-start: 0.4rem;
	}
	.wordpress .api-key-setup > li figure img {
		max-height: none;
	}
	.wordpress .api-key-setup .active figure img,
	.wordpress .api-key-setup figure:hover img {
		filter: none;
		box-shadow: 0 0 0.4rem 1px rgba(30, 30, 30, 0.8);
	}
	.wordpress .api-key-setup figure::before,
	.wordpress .api-key-setup figure::after {
		outline: 0.6rem solid rgba(56, 56, 56, 0.01);
		transition: 0.2s outline linear 0.3s;
	}
	.wordpress .api-key-setup > li:nth-child(2) figure::before,
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(1) figure::before,
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(2) figure::before,
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(3) figure::before,
	.wordpress .api-key-setup > li:nth-child(4) figure::before,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(1) figure::before,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(2) figure::before,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(3) figure::before,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(3) figure::after,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(1) figure::before,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(2) figure::before,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(3) figure::before,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(3) figure::after,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(4) figure::before,
	.wordpress .api-key-setup > li:nth-child(7) li:nth-child(1) figure::before,
	.wordpress .api-key-setup > li:nth-child(7) li:nth-child(2) figure::before {
		position: absolute;
		content: '';
		width: 2.1rem;
		height: 1rem;
		outline-offset: 2px;
		z-index: 33;
	}
	.wordpress .api-key-setup .active figure::before,
	.wordpress .api-key-setup .active figure::after,
	.wordpress .api-key-setup figure:hover::before ,
	.wordpress .api-key-setup figure:hover::after {
		outline: 0.25rem solid #C80003;
	}
	.wordpress .api-key-setup figure:hover::before {
		transition: 0.1s outline linear 0s;
	}
	.wordpress .api-key-setup > li:nth-child(2) figure::before {
		margin-block-start: 10.2rem;
		margin-inline-start: 5.82rem;
	}
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(1) figure::before {
		margin-block-start: 4.1rem;
		margin-inline-start: 12.82rem;
		width: 5rem;
	}
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(2) figure::before {
		margin-block-start: 5.4rem;
		margin-inline-start: 12.72rem;
		width: 13.2rem;
		height: 1.35rem;
	}
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(3) figure::before {
		margin-block-start: 21.1rem;
		margin-inline-start: 20.82rem;
		width: 2.3rem;
	}
	.wordpress .api-key-setup > li:nth-child(4) figure::before {
		margin-block-start: 9.5rem;
		margin-inline-start: 10.1rem;
		width: 3.3rem;
		height: 0.8rem;
	}
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(1) figure::before {
		margin-block-start: 18.15rem;
		margin-inline-start: 3.3rem;
		width: 8.4rem;
		height: 0.7rem;
	}
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(2) figure::before {
		margin-block-start: 24.7rem;
		margin-inline-start: 3.3rem;
		width: 3.7rem;
	}
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(3) figure::before {
		margin-block-start: 26.95rem;
		margin-inline-start: 4rem;
		width: 10.35rem;
		height: 1.2rem;
	}
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(3) figure::after {
		margin-block-start: 29.2rem;
		margin-inline-start: -17.65rem;
		width: 2rem;
		height: 0.9rem;
	}
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(1) figure::before {
		margin-block-start: 31.8rem;
		margin-inline-start: 3.2rem;
		width: 3.5rem;
		height: 0.8rem;
	}
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(2) figure::before {
		margin-block-start: 26.5rem;
		margin-inline-start: 3.5rem;
		width: 11.35rem;
	}
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(3) figure::before {
		margin-block-start: 22.75rem;
		margin-inline-start: 3.8rem;
		width: 10.6rem;
		height: 0.75rem;
	}
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(3) figure::after {
		margin-block-start: 26.2rem;
		margin-inline-start: -17.1rem;
		width: 1.3rem;
		height: 0.7rem;
	}
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(4) figure::before {
		margin-block-start: 30.8rem;
		margin-inline-start: 3.45rem;
		width: 1.6rem;
		height: 0.9rem;
	}
	.wordpress .api-key-setup > li:nth-child(7) li:nth-child(1) figure::before {
		margin-block-start: 9.5rem;
		margin-inline-start: 25.7rem;
		width: 2.2rem;
		height: 0.7rem;
	}
	.wordpress .api-key-setup > li:nth-child(7) li:nth-child(2) figure::before {
		margin-block-start: 17.6rem;
		margin-inline-start: 21.02rem;
		width: 0.7rem;
		height: 0.7rem;
	}
	.wordpress #setup #api-key-guide-navigation {
		position: absolute;
		width: calc(1020px - 32rem);
		margin-block: -3rem 0;
		margin-inline: 32rem 0;
		padding-inline-start: 0;
	}
	.wordpress #api-key-guide-navigation ol {
		display: inline;
	}
	.wordpress .api-key-setup > li:nth-child(3) li:nth-child(3) img,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(1) img,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(2) img,
	.wordpress .api-key-setup > li:nth-child(5) li:nth-child(3) img,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(1) img,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(4) img,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(2) img,
	.wordpress .api-key-setup > li:nth-child(6) li:nth-child(3) img,
	.wordpress .api-key-setup > li:nth-child(7) li:nth-child(2) img {
		max-height: none;
	}
	.hosting.table .button {
		display: inline-block;
	}
	.contact #direct {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 1.4rem;
	}
	.contact #direct > * {
		align-self: flex-start;
		margin: 0;
	}
	.contact #direct > :nth-child(2n+1) {
		flex: 3 0 70%;
	}
	.contact #direct > :nth-child(2n) {
		flex: 1 0 20%;
	}
	.contact #direct > h2:first-child {
		flex: 1 0 100%;
	}
	.contact #direct h3 {
		font-size: 1rem;
	}
}

@media screen and (width >= 940px) {
	#logo {
		max-width: 220px;
	}
	article section {
		overflow: hidden;
	}
	#domain-search-form .domain-button {
		order: 2;
	}
	#domain-search-form .domain-tlds {
		order: 3;
	}
	.hosting .hosting .label,
	.hosting .frequency .label {
		flex: 1 0 8%;
	}
	.hosting .hosting .input,
	.hosting .frequency .input {
		flex: 1 0 67%;
	}
	.hosting .hosting .change,
	.hosting .frequency .change {
		flex: 1 0 19%;
		text-align: end;
		float: none;
	}
	form.contact,
	#login-form,
	#hosting-form .hosting,
	#hosting-form .frequency,
	#checkout-form .buttons {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	#hosting-form .hosting,
	#hosting-form .frequency {
		width: 100%;
		clear: both;
	}
	form.contact h2,
	form.contact h3,
	form.contact .field {
		flex: 3 0 100%;
	}
	#login-form .field,
	#checkout-form .buttons button {
		flex: 1 0 49%;
	}
	#login-form .buttons {
		flex: 2 0 100%;
	}
	form.contact .field.first-name,
	form.contact .field.last-name,
	form.contact .field.email,
	form.contact .field.email-address,
	form.contact .field.city,
	form.contact .field.state,
	form.contact .field.postcode,
	form.hosting .field.first-name,
	form.hosting .field.last-name,
	form.hosting .field.company-name {
		flex: 1 0 32%;
	}
	form.contact .field.phone,
	form.contact .field.website,
	form.hosting .field.country {
		flex: 1 0 49%;
	}
	form.contact .field.first-name,
	form.contact .field.last-name,
	form.contact .field.phone,
	form.contact .field.city,
	form.contact .field.state,
	#login-form .field.username,
	#checkout-form .buttons button:first-child {
		margin-inline-end: 1.9%;
	}
	form.hosting.contact .field.phone,
	form.hosting .company-name,
	#checkout-form .buttons button:last-child {
		margin-inline-end: 0;
	}
	form.contact.hosting .field.email,
	form.contact.hosting .field.email-address {
		flex: 1 0 61%;
		margin-inline-end: 1.9%;
	}
	form.contact.hosting .field.phone {
		flex: 1 0 37%;
		margin-inline-end: 0;
	}
	#login-form label {
		display: none;
	}
	form .postal-address textarea {
		height: 4.1em;
	}
	table.cart th:first-child,
	table.cart td:first-child {
		width: 20%;
	}
	table.cart th:nth-child(2),
	table.cart td:nth-child(2) {
		width: 35%;
	}
	table.cart th.unit,
	table.cart td.unit {
		width: 11%;
	}
	table.cart th.frequency,
	table.cart td.frequency,
	table.cart th.quantity,
	table.cart td.quantity {
		width: 10%;
	}
	table.cart th:last-child,
	table.cart td:last-child {
		width: 14%;
	}
	table.cart th.preferences,
	table.cart td.preferences,
	table.cart th.preferences:first-child,
	table.cart td.preferences:first-child,
	table.cart tfoot th:first-child,
	table.cart tfoot td:first-child {
		width: 86%;
	}
	#reviews li {
		flex: 1 0 22%;
	}
	#reviews li > p {
		max-height: 12.6em;
		overflow: auto;
		scrollbar-width: thin;
	}
	#features ul,
	#features .features,
	#demo .link-list,
	#demo p + .link-list,
	#requirements ul {
		columns: 28rem 2;
		gap: 3rem;
	}
	#features ul li,
	#features .features li {
		break-inside: avoid;
	}
	#faq .toggle,
	.support section .toggle {
		width: 1.3rem;
		height: 1.3rem;
		line-height: 140%;
		opacity: 0.7;
		transform: scale(0.8, 0.8);
		transition: 0.2s linear opacity;
	}
	#faq h3:hover .toggle,
	.support section h3:hover .toggle {
		opacity: 1;
		transform: scale(1, 1);
	}
	#popup-image-overlay {
		z-index: 200;
	}
	#popup-previous a,
	#popup-next a {
		width: 10rem;
		height: 10rem;
	}
}

@media screen and (width >= 1010px) {
	header nav a {
		padding-block: 0.4rem;
		padding-inline: 1.3rem;
	}
	section.full-width {
		padding-block: 1rem;
		padding-inline: 0;
	}
	header nav .account {
		margin-inline-start: 2rem;
	}
	footer,
	footer .pages nav {
		text-align: start;
		display: flex;
	}
	footer {
		flex-flow: row wrap;
	}
	footer .pages nav ul {
		flex: 1 0 0;
	}
	footer p,
	footer nav li {
		display: block;
		clear: both;
		float: none;
	}
	footer .social-media {
		min-width: 180px;
		flex: 1 0 40%;
	}
	footer .social-media p {
		text-align: end;
	}
	footer .social-media nav li {
		display: inline-block;
	}
	footer .pages {
		flex: 1 0 60%;
	}
	footer .copyright {
		flex: 4 0 100%;
	}
	footer .social-media .logo {
		margin-block: 0.6rem 0.1rem;
		margin-inline: auto 0;
	}
	footer .social-media .slogan {
		margin-block: 0.2rem 0.5rem;
		margin-inline: auto 0;
		max-width: 300px;
	}
	footer .logo a {
		display: block;
		margin-inline: auto 0;
		padding-inline: 28% 0;
	}
	footer nav li + li::before {
		display: none;
		content: '';
	}
	footer nav a {
		min-width: 1.4rem;
		display: block;
		line-height: 180%;
	}
	footer .social-media {
		flex: 1 0 8%;
		margin-inline-start: calc( calc(100% - 1040px) * 0.5 + 1.8rem);
		padding-inline-end: 3rem;
		text-align: end;
	}
	footer .pages {
		flex: 3 0 18%;
		margin-inline-end: calc( calc(100% - 1040px) * 0.5 + 1.8rem);
		border-left: 2px solid var(--accent-color);
		padding-inline-start: 3rem;
	}
	footer .pages ul:last-child {
		flex: 0 1 26%;
	}
	.hosting.table.full-width {
		padding: 0;
	}
	#contents > ul > li:first-child {
		flex: 1 0 17.8rem;
	}
	#contents .section {
		margin-block-end: 0.6rem;
	}
	form.contact .field.first-name,
	form.contact .field.last-name {
		flex: 1 0 24.5%;
	}
	form.contact .field.email,
	form.contact .field.email-address {
		flex: 1 0 47%;
	}
	form.contact .field.city,
	form.contact .field.state {
		flex: 1 0 37.5%;
	}
	form.contact .field.postcode {
		flex: 1 0 20.5%;
	}
}

@media screen and (width >= 1200px) {
}

@media screen and (width >= 1250px) {
	#logo {
		inset-block-start: -100px;
	}
	#logo-wide {
		inset-inline-start: 0;
		transform: scale(0.8, 0.8);
	}
	.portfolio .item .image:first-child:nth-last-child(2n+1) {
		max-height: 12.4rem;
	}
	.portfolio .item .image {
		max-height: 12.4rem;
		overflow: hidden;
	}
	.portfolio .item .images .image {
		max-height: 5.5rem;
	}
	.portfolio .item .image + .image {
		flex: 0 1 calc(50% - 0.5rem);
		padding-inline: 0;
	}
	.portfolio .item .image:first-child:nth-last-child(2n+1) ~ .image:nth-child(n+4),
	.portfolio .item .image:first-child:nth-last-child(2n) ~ .image:nth-child(n+3) {
		flex: 0 1 calc(25% - 0.75rem);
		max-height: 2.2rem;
	}
	.portfolio .item .image:first-child:nth-last-child(4) ~ .image:nth-child(n+2),
	.portfolio .item .image:first-child:nth-last-child(3) ~ .image:nth-child(n+2) {
		flex: 0 1 calc(50% - 0.5rem);
		max-height: 5.3rem;
	}
	.portfolio .item .work {
		overflow: hidden;
		max-height: 7.3em;
		transition: 0.2s max-height ease-in-out;
	}
	.portfolio .item .work.expanded {
		max-height: none;
	}
	.portfolio .image:hover .caption {
		transform: scaleY(0);
	}
	.portfolio .item .expand {
		display: block;
		cursor: pointer;
		position: absolute;
		background: linear-gradient(90deg, rgba(234, 234, 234, 0.2) 0%, rgba(234, 234, 234, 0.9) 10%, rgba(234, 234, 234, 0.9) 90%, rgba(234, 234, 234, 0.2) 100%);
		margin-block-start: -1.8rem;
		z-index: 400;
		width: calc(100% - 2.6rem);
		text-align: center;
		line-height: 200%;
		text-transform: uppercase;
		font-size: 0.8rem;
		border-top: 1px dotted var(--link-color);
		color: var(--link-color);
	}
	.portfolio .item .work.expanded + .expand {
		display: none;
	}
}

@media screen and (width >= 1285px) {
	#logo-wide {
		transform: scale(0.9, 0.9);
	}
}

@media screen and (width >= 1325px) {
	#logo-wide {
		transform: scale(1, 1);
	}
}

@media screen and (min-height: 850px) {
	header {
		position: sticky;
		inset-block-start: 0;
		z-index: 100;
	}
	header #menu-header {
		position: absolute;
	}
	article > * {
		margin-block: 1.7rem 2.4rem;
	}
	.hosting.table li li {
		line-height: 2.2rem;
	}
}

@media (forced-colors: active) {
	section.hosting .unit,
	section.hosting .name,
	.contact .required,
	.cart .remove,
	#domain-search-form .domain-result .status.checking,
	#domain-search-form .domain-result.checking .select .fa,
	#domain-search-form .domain-tlds label,
	#popup-image #popup-close {
		opacity: 0.98;
	}
	section.hosting .unit {
		font-size: 0.92em;
	}
	#popup-previous a,
	#popup-next a {
		opacity: 0.8;
	}
}

@media (forced-colors: active) and (width >= 300px) {
	section.hosting .unit {
		opacity: 1;
	}
}

@media (prefers-color-scheme: dark) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		border-color: rgba(255, 255, 255, 0.8);
	}
	#message-overlay {
		background-color: rgba(30, 30, 50, 0.9);
	}
	table.cart td.empty, table.cart td:first-child:last-child {
		color: rgba(255, 255, 255, 0.6);
	}
	#domain-search-form .whois-result,
	.whois-result .field {
		color: rgba(230, 230, 230, 0.95);
	}
	.whois-result .result {
		background-color: rgba(30, 30, 50, 0.45);
	}
	.portfolio .item h3,
	.portfolio .item h3 a,
	.portfolio .item h3 .fa {
		color: var(--menu-color);
	}
	.portfolio .item h3 {
		padding-block: 0.6rem 0;
		background-color: var(--menu-background-color);
		box-shadow: 0 -2px 0 rgba(0, 0, 0, 0);
	}
	.portfolio .item:hover h3 {
		background-color: var(--menu-background-color);
		box-shadow: 0 -2px 0 var(--menu-hover-background-color);
	}
	.icon-x {
		filter: none;
	}
	article > .portfolio .item {
		background-color: rgba(56, 56, 56, 0.2);
	}
	article > .portfolio .item:hover {
		background-color: rgba(66, 66, 66, 0.2);
	}
	footer .logo img,
	footer .slogan img {
		filter: brightness(250%) grayscale(30%);
	}
	.hosting.table .box,
	.hosting.table > ul > li:nth-child(2n) {
		background-color: rgba(205, 205, 255, 0.04);
	}
	.contact .required {
		opacity: 0.9;
	}
	footer nav,
	footer .copyright {
		color: var(--accent-color);
	}
	.contact .icon-x,
	footer .icon-x {
		filter: invert(100%);
	}
}

@media screen and (min-height: 1000px) {
	header + article {
		min-height: calc(100vh - 22rem);
		margin-block-end: 0;
	}
}

@media screen and (width >= 850px) and (prefers-color-scheme: dark) {
	.hosting.table > ul > li:nth-child(2n) {
		background-color: rgba(205, 205, 255, 0);
	}
}

@media screen and (width >= 1250px) and (prefers-color-scheme: dark) {
	.portfolio .item .expand {
		background: linear-gradient(90deg, rgba(35, 36, 47, 0.2) 0%, rgba(35, 36, 47, 0.9) 10%, rgba(35, 36, 47, 0.9) 90%, rgba(35, 36, 47, 0.2) 100%);
	}
}

@media print { 
	#menu-header,
	#skip,
	footer #menu-footer-social,
	footer .pages {
		display: none;
	}
	footer {
		position: relative;
		min-height: 0;
	}
	article button,
	article .button,
	footer #menu-footer-social a {
		color: var(--link-color);
		background-color: var(--background-color);
		border: 2px solid var(--link-color);
	}
	h1 > a,
	h1 > a:visited,
	h2 > a,
	h2 > a:visited,
	h3 > a,
	h3 > a:visited {
		color: var(--color);
	}
	section.full-width > h1,
	section.full-width > h2,
	section.full-width > h3,
	section.full-width > h4,
	section.full-width > div,
	section.full-width > ul,
	section.full-width > ol,
	section.full-width > p,
	section.full-width > table {
		margin-block: inherit;
		margin-inline: auto;
	}
	section.highlight,
	section.highlight h1,
	section.highlight h2,
	section.highlight h3,
	section.highlight h4,
	section.highlight div,
	section.highlight ul,
	section.highlight ol,
	section.highlight p,
	section.highlight table,
	section.highlight a,
	section.highlight a:visited,
	section.highlight a:active,
	section.highlight a:hover {
		color: var(--color);
		background-color: var(--background-color);
	}
	.hosting.table.full-width h2 {
		padding-inline: 0;
	}
	.hosting.table > ul {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		flex-direction: revert;
	}
	.hosting.table.full-width > ul > li {
		flex: 1 0 14rem;
		border: 2px solid var(--link-color);
	}
	#domain-search-form .domain-button {
		display: flex;
	}
}