body
{
	border: 0;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	font-size: 1em;
	background-color: #fff;
}

.uk
{
	position: absolute;
	top: 0;
	right: 0;
	width: 6em;
}

.logo
{
	width: 7em;
	padding: 0.5em;
	border-radius: 0.5em;
	transition: 0.5s;
}

.logo:hover
{
	background-color: #6b9967;
}

.nonsense
{
	padding-right: 1em;
}


.header
{
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	background-color: #597258;
	color: #fff;
	font-size: 2em;
	font-style: italic;
	align-items: center;
}

.header > div
{
	width: 50%;
	flex: 1;
}

.header > div:nth-of-type(1)
{
	padding-right: 1em;
}

.header > div:nth-of-type(2)
{
	padding-top: 0.5em;
	text-align: right;
}

.homebullet li:before
{
	content: "\25B8";
}

.bullet li:before
{
	content: "\25B8  ";
}

.list
{
    list-style-type: disc;
}

.nav
{
	background-color: #6b9967;
	color: #fff;
	padding: 0.5em 1.2em;
	font-size: 1.25em;
}

.nav a
{
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 0.35em 0.4em 0.25em 0.25em;
	margin-right: 0.2em;
	transition: 0.5s;
	border-radius: 2em;
}

.nav a:before
{
	content: "\25B8";
}

.nav a:before
{
		padding-right: 0.25em;
}

.nav a:hover
{
	background-color: #fff;
	color: #6b9967;
}

.body
{
	padding: 1em 2em 0.5em 2em;
	font-size: 1.25em;
}

.main
{
	box-shadow: inset 0 10px 10px -10px #888, inset 0 -10px 10px -10px #888;
}

.customers
{
	box-shadow: inset 0 10px 10px -10px #888;
}

.body a
{
	color: #a00;
}

.body a:hover
{
	color: #f00;
}

.body p
{
	color: #333;
	font-size: 1em;
	line-height: 1.25em;
}

.footer
{
	text-align: center;
	background-color: #597258;
	color: #fff;
	padding: 1em;
	font-size: 0.9em;
}

/* mobile */
@media screen and (max-width: 640px)
{
	.flexyr
	{
		display: none;
	}
}

/* display */
@media screen and (min-width: 641px)
{
	.intro
	{
		max-width: 80%;
	}

	.flexyr
	{
		display: inline;
	}
}

.intro
{
	margin-top: 0.5em;
	font-size: 1.2em;
	line-height: 1.25em;
	color: #444;
}

.intro strong
{
	color: #000;
}

.body ul:not(.list)
{
	list-style-type: none;
	margin: 1em 0 0 0;
	padding: 0 0 0 0.5em;
}

.body ul > li
{
	margin-bottom: 0.25em;
}

.body ul > li > a
{
/*	text-decoration: none;*/
	text-transition: 0.5s;
	transition: 0.5s;
	border-radius: 0.5em;
}

.body ul > li > a:before
{
	padding-right: 0.75em;
}

.serverpic
{
	max-width: 25%;
	padding: 0 0 0.25em 0.5em;
}

.benefits
{
	background-color: #6b9967;
	color: #fff;
	padding: 0.5em 2em 2em 2em;
	text-align: center;
	font-size: 1.3em;
}

.benefits h2
{
	font-size: 1.5em;
	margin: 0.5em 0 0.5em 0;
}

.beneflex, .bodyflex
{	
	display: flex;
	flex-wrap: wrap;
}

.beneflex
{
	margin-top: 0.5em;
}

.flexyl, .flexyr
{
	margin-top: 0;
	padding-top: 0;
}

.flexyl
{
	flex: 5;
}

.flexyr
{
	flex: 1;
	text-align: right;
}

.flexyr img
{
	max-width: 9em;
}

.benefit
{
	flex: 1;
	font-size: 1.1em;
	min-width: 7em;
	text-align: center;
	font-weight: strong;
	padding-top: 1em;
}

.benefit i
{
	font-size: 4.75em;
	display: block;
	margin-bottom: 0.15em;
	text-transform: 
}

.benefit a
{
	text-decoration: none;
	color: inherit;
}

@keyframes present1
{
    0%   { transform: scale(1.0, 1.0); }
    17%  { transform: scale(1.1, 1.1); }
    34%  { transform: scale(1.0, 1.0); }
    51%  { transform: scale(1.0, 1.0); }
    68%  { transform: scale(1.0, 1.0); }
    85%  { transform: scale(1.0, 1.0); }
    99%  { transform: scale(1.0, 1.0); }
}

@keyframes present2
{
    0%   { transform: scale(1.0, 1.0); }
    17%  { transform: scale(1.0, 1.0); }
    34%  { transform: scale(1.1, 1.1); }
    51%  { transform: scale(1.0, 1.0); }
    68%  { transform: scale(1.0, 1.0); }
    85%  { transform: scale(1.0, 1.0); }
    99%  { transform: scale(1.0, 1.0); }
}

@keyframes present3
{
    0%   { transform: scale(1.0, 1.0); }
    17%  { transform: scale(1.0, 1.0); }
    34%  { transform: scale(1.0, 1.0); }
    51%  { transform: scale(1.1, 1.1); }
    68%  { transform: scale(1.0, 1.0); }
    85%  { transform: scale(1.0, 1.0); }
    99%  { transform: scale(1.0, 1.0); }
}

@keyframes present4
{
    0%   { transform: scale(1.0, 1.0); }
    17%  { transform: scale(1.0, 1.0); }
    34%  { transform: scale(1.0, 1.0); }
    51%  { transform: scale(1.0, 1.0); }
    68%  { transform: scale(1.1, 1.1); }
    85%  { transform: scale(1.0, 1.0); }
    99%  { transform: scale(1.0, 1.0); }
}

@keyframes present5
{
    0%   { transform: scale(1.0, 1.0); }
    17%  { transform: scale(1.0, 1.0); }
    34%  { transform: scale(1.0, 1.0); }
    51%  { transform: scale(1.0, 1.0); }
    68%  { transform: scale(1.0, 1.0); }
    85%  { transform: scale(1.1, 1.1); }
    99%  { transform: scale(1.0, 1.0); }
}

.benefit:nth-of-type(1) 
{
	animation: present1 10s;
	animation-iteration-count: infinite; 
}

.benefit:nth-of-type(2) 
{
	animation: present2 10s;
	animation-iteration-count: infinite; 
}


.benefit:nth-of-type(3)
{
	animation: present3 10s;
	animation-iteration-count: infinite; 
}


.benefit:nth-of-type(4)
{
	animation: present4 10s;
	animation-iteration-count: infinite; 
}


.benefit:nth-of-type(5)
{
	animation: present5 10s;
	animation-iteration-count: infinite; 
}

.centre
{
	text-align: center;
}

.centre h2
{
	margin: 0.2em 0 0.75em 0;
}

.testimonials
{
	display: flex;
	flex-wrap: wrap;
}

.testiflex
{
	flex: 1;
	padding: 0 1em;
	min-width: 12em;
	padding: 0.5em;
}

.bubbler
{
	margin-bottom: 0.5em;
}

.bubbleLeft, .bubbleRight
{
	font-size: 0.8em;
	position: relative;
	min-height: 3em;
	padding: 0.5em 1.5em;
	background: #FFFFFF;
	border-radius: 20px;
	border: #6b9967 solid 4px;
	box-shadow: 0 0 0.5em #ccc;
	color: #555;
	text-align: right;
}

blockquote
{
	margin: 0;
	padding: 0 0 0.5em 0;
	text-align: left;
}

.bubbleLeft:before, .bubbleRight:before
{
	content: '';
	position: absolute;
	border-style: solid;
	border-color: transparent #6b9967;
	display: block;
	width: 0;
	z-index: 0;
	top: 34px;
}

.bubbleLeft:after, .bubbleRight:after
{
	content: '';
	position: absolute;
	border-style: solid;
	border-color: transparent #FFFFFF;
	display: block;
	width: 0;
	z-index: 1;
	top: 37px;
}

/* The following magic makes the speech bubble lines point responsively */

@media screen and (min-width: 641px)
{
	.bubbleLeft:before
	{
		border-width: 18px 28px 18px 0;
		left: -32px;
	}

	.bubbleRight:before
	{
		border-width: 18px 0 18px 28px;
		right: -32px;
	}

	.bubbleLeft:after
	{
		border-width: 15px 25px 15px 0;
		left: -25px;
	}

	.bubbleRight:after
	{
		border-width: 15px 0 15px 25px;
		right: -25px;
	}
}

@media screen and (max-width: 640px)
{
	.testiflex > .bubbler:nth-child(odd) > .bubbleLeft:before, .testiflex > .bubbler:nth-child(even) > .bubbleRight:before
	{
		border-width: 18px 28px 18px 0;
		left: -32px;
	}

	.testiflex > .bubbler:nth-child(even) > .bubbleLeft:before, .testiflex > .bubbler:nth-child(odd) > .bubbleRight:before
	{
		border-width: 18px 0 18px 28px;
		right: -32px;
	}

	.testiflex > .bubbler:nth-child(odd) > .bubbleLeft:after, .testiflex > .bubbler:nth-child(even) > .bubbleRight:after
	{
		border-width: 15px 25px 15px 0;
		left: -25px;
	}

	.testiflex > .bubbler:nth-child(even) > .bubbleLeft:after, .testiflex > .bubbler:nth-child(odd) > .bubbleRight:after
	{
		border-width: 15px 0 15px 25px;
		right: -25px;
	}
}

/*  /magic */

.calltoaction
{
	background-color: #444;
	color: #fff;
	box-shadow: inset 0 20px 20px -20px #000, inset 0 -20px 20px -10px #333;
	font-size: 1em;
	padding: 2em 1em 2.75em 1em;
}

.calltoaction a
{
	color: #ff0;
	font-size: 1.3em;
}

@media screen and (min-width: 720px)
{
	.bitty
	{
		display: block;
		position: relative;
	}
}

@media screen and (max-width: 719px)
{
	.bitty { display: none; }
}

.bitty img
{
	width: 6em;
	position: absolute;
	bottom: 0;
	right: 5em;
}

.body h1
{
	border-bottom: 2px double #ccc;
}

.body h2:not(.ourword)
{
	border-bottom: 1px solid #ccc;
}

.body table
{
	border: 1px solid #888;
	border-collapse: collapse;
	width: 99%;
	max-width: 900px;
}

.pagetoc
{
	padding: 0 0 1em 1em;
	width: 100%;
	max-width: 20em;
	border: 2px double #ccc;
	background-color: #fff;
}

.pagetoc h4
{
	padding: 0;
	margin: 1em 0;
}

.pagetoc ol ul
{
	padding-left: 0.85em;
}

.pagetoc a:before
{
	content: "\25B8  ";
}

.pagetoc li
{
    list-style: none;
}

.body ul:not(.homebullet)
{
	margin-bottom: 2em;
}

.baseplan td
{
	text-align: center;
}

.extras tr:not(:first-of-type) > th
{
	text-align: left;
	font-weight: normal;
}

.extras td
{
	text-align: right;
}

.specvps th
{
	font-size: 16px;
}

.specvps td
{
	text-align: center;
}

.specvps select
{
	border: 1px solid #888;
	font-size: 18px;
}

.ordervps td
{
	text-align: center;
}

.ordervps input
{
	font-size: 18px;
	color: #fff;
	background-color: #6b9967;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right: 1px solid #444;
	border-bottom: 1px solid #444;
	border-radius: 5px;
	padding: 4px 12px;
	box-shadow: 0 0 7px #888;
}

.ordervps input:active
{
	padding: 5px 11px 3px 13px;
	border-left: 1px solid #444;
	border-top: 1px solid #444;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	box-shadow: 0 0 9px #444;
}

.navsubmit {
    font-size: 1.25em;
}

.graphs p
{
	display: inline-block;
}

.marvin li
{
	padding-bottom: 10px;
}

.payment tr:first-of-type > td
{
	padding-top: 20px;
}

.payment tr:last-of-type > td
{
	padding-bottom: 20px;
}

.payment td
{
	padding-bottom: 10px;
}

.testimonial blockquote, .testimonial p
{
	padding: 0; margin: 0;
}

.testimonial
{
	max-width: 700px;
	margin-bottom: 25px;
	border: 1px solid #ccc;
	padding: 10px;
}

.author
{
	text-align: right;
}

.spaced li
{
	padding-bottom: 12px;
}