/* =========================================================================
   Index:

  1. GLOBAL
    - Base
    - Buttons
    - Dropdown

  2. HEAD & NAVIGATION
    - Top Nav
    - Main Nav
    - Sub Nav
    - Third Level Nav
    - Breadcrumbs
    - Mobile Only Nav

  3. CONTENT
    - Banners
    - Content
    - Columns
    - Product Columns
    - Highlighted Content Block
    - Slideup (Animated) Box/Column
    - Domain Offers
    - Domain Results
    - Tabs
    - Lists
    - Features
    - Summary Banners
    - Dedicated Servers
    - FAQs
    - Video
    - Tables
    - Terms & Conditions
    - MORE INFO/CALL US Banner
    - GTLDs Random Block Colour
    - About Timeline
    - DC Map
    - Customer Reviews
    - Forms
    - About Us Include
    - Secret Page
    - Newsletter Include
    - Office Programs
    - Footer
    - Modal & Features (Popup)
    - 404 Page
    - Live chat styles
    - Helper Classes
    _ Print Styles
    - Social Icon Styles
    - IE Fixes
    - Website Adverts & Offers

  4. WIZARD / CHECKOUT


   ========================================================================== */

/* ==========================================================================
   1. GLOBAL
   ========================================================================== */

/* -------------------------------
   BASE
   ------------------------------- */
html {
    box-sizing: border-box;
    color: #333;
    font-size: 1em;
    line-height: 1.4;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;

}


::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

body {
    font: 15px/26px 'Cairo';
    padding-top: 0;
}

section:after,
aside:after {
    content: "";
    display: table;
    clear: both;
}

a,
a:link {
    text-decoration: none;
}

a:focus,
a:active,
a:hover {
    outline: 0;
}

p {
    text-rendering: optimizelegibility;
    margin: 10px 0;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    font-family: "Cairo", Arial;
    font-weight: 400;
}

h1 {
    font-size: 38px;
    line-height: 1.1em;
    text-align: center;
    margin-top: 0;
    font-weight: 400;
    letter-spacing: 0.4px;
    position: relative;
}

h1 span {
    font-size: 18px;
    color: #192a76;
    display: block;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    font-style: italic;
}

.underline-h3 h3 {
    position: relative;

}

.underline-h3 h3:after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 10px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b628c9+0,192a76+50,192a76+72,f2981a+100 */
    background: #b628c9; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b628c9', endColorstr='#f2981a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

blockquote:before,
blockquote:after {
    position: relative;
    content: "\201C";
    font-family: "georgia", "Times New Roman";
    font-size: 2.7em;
    top: 30px;
    margin-right: 10px;
}

blockquote:after {
    content: "\201D";
    margin-left: 10px;
}

blockquote {
    font-size: 1.6em;
    padding-bottom: 10px;
    font-style: italic;
    color: #192a76;
    position: relative;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #eaf0f6 inset;
}

.block-highlight {
    border: 1px solid #192a76;
    padding: 60px 60px !important;
    position: relative;
}

.block-highlight:after, .block-highlight:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.block-highlight:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 20px;
    margin-left: -20px;
}

.block-highlight:before {
    border-color: rgba(236, 95, 25, 0);
    border-bottom-color: #192a76;
    border-width: 21px;
    margin-left: -21px;
}

/* ---- Add these class names to any section or object to add a slide-in animation when on scroll */
.animate-in-view-up,
.animate-in-view-down,
.animate-in-view-left,
.animate-in-view-right {
    visibility: hidden;
}

/*##################
 COLOURS
 http://chir.ag/projects/name-that-color/
##################*/

.clr--tango {
    color: #192a76 !important;
}

.clr--tango--60 {
    color: rgba(236, 95, 25, 0.6) !important;
}

.clr--shakespeare {
    color: #4bb5db !important;
}

.clr--shakespeare--60 {
    color: rgba(75, 181, 219, 0.6) !important;
}

.clr--silverChalice {
    color: #aaa !important;
}

.clr--doveGray {
    color: #666 !important;
}

.clr--doveGray--50 {
    color: rgba(102, 102, 102, 0.5) !important;
}

/*Background Colours*/
.bgclr--chateauGreen {
    background-color: #2fbe49 !important;
    color: #fff !important;
}

.bgclr--tango {
    background-color: #192a76 !important;
    color: #fff !important;
}

.bgclr--doveGray {
    background-color: #666 !important;
    color: #fff !important;
}

/*End Colours*/

.no-scroll {
    height: 100%;
    overflow: hidden !important;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 60px 10px;
    margin: 0 auto;
}

.wrapper-narrow {
    max-width: 802px;
}

.wrapper-wide {
    max-width: 1600px;
}

.wrapper-full {
    max-width: 1920px;
}

.wrapper:after {
    content: "";
    display: block;
    clear: both;
}

.fixed-nav-padding {
    padding-top: 60px;
}

.desktoponly {
    display: none !important;
}

.toppadding {
    padding-top: 40px !important;
}

.text-center {
    text-align: center;
}

.centerit {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.centerit p {
    margin: 0 auto !important;
    text-align: center !important;
}

.centre-image {
    display: block;
    margin: 0 auto 30px;
    width: 100%;
    max-width: 1600px;
    height: auto;
}

.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.blacktext {
    color: #333 !important;
}

.whitetext {
    color: #fff !important;
}

.makelowercase {
    text-transform: lowercase !important;
    font-size: 1.22em;
}

.statement {
    text-align: center;
    font-size: 1.6em;
    line-height: 2rem;
    margin-top: -16px;
    padding: 0 20px;
}

p.top-para {
    opacity: 0.65;
    font-size: 1.3rem;
    line-height: 1.9rem;
    margin-bottom: 60px;
}

.fa {
    transform: rotate(0.001deg);
}

.fa-spin {
    animation: fa-spin 1s infinite linear;
}

.fa-massive {
    color: #192a76;
    font-size: 150px;
    padding: 30px;
}

/* Tooltips used on comparison tables &  */
.tooltip {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.tooltip .fa,
.tooltip h3 {
    pointer-events: none;
}

.tooltip-inner {
    position: absolute;
    padding: 40px;
    background: #fff;
    box-shadow: 5px 5px 68px -12px rgba(0, 0, 0, 0.46);
    font-size: 0.9em;
    text-align: left;
    line-height: 1.4em;
    width: 370px;
    right: -390px;
    top: -46px;
    transition: ease-in-out 0.2s;
    z-index: 3;
    visibility: hidden;
}

.tooltip-inner h4 {
    font-size: 1.4em;
    position: relative;
    margin: 0 0 28px !important;
    padding: auto !important;
    border: none !important;
}

.tooltip-inner h4:after {
    content: "";
    width: 330px;
    height: 5px;
    background: #192a76;
    position: absolute;
    bottom: -13px;
    right: -40px;
    display: block;
}

.tooltip-inner p {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1.5em;
    font-size: 13px;
}

.tooltip-inner li {
    font-size: 12px;
    opacity: 0.7;
}

.tooltip-inner:after {
    right: 100%;
    top: 60px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 8px;
    margin-top: -8px;
}

/*------- end -------*/

.fa.open-tt {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px;
    color: #aaa;
    display: block;
    font-size: 10px;
    padding: 3px 7px;
    position: absolute;
    right: 5px;
    top: 7px;
}

table td.raid:hover .fa-check .tooltip,
.open-tt:hover .tooltip {
    display: block;
    opacity: 1;
}

table thead .tooltip {
    font-size: 12px;
    margin-left: -100px;
    width: 200px;
}

.extrainfo {
    border-bottom: 1px dotted #ddd;
    position: relative;
}

.extrainfo:hover:before {
    /* ------- THIS IS THE MAGIC ----------------*/
    content: attr(data-hover);
    /* ------------------------------------------*/
    display: block;
    background: #000;
    position: absolute;
    top: 100%;
    left: -7px;
    right: -7px;
    padding: 15px;
}

.extrainfo:hover:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-bottom-color: #000;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    z-index: 20;
}

.gradient-underline-block {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b628c9+0,192a76+50,192a76+72,f2981a+100 */
    background: #b628c9; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b628c9', endColorstr='#f2981a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    padding: 7px 14px;
    display: block;
    width: 100%;
    color: #fff !important;
}

.gradient-underline-block :before {
    content: "\f0ac";
    font-family: FontAwesome;
    color: rgba(255, 255, 255, 0.4);
    padding-right: 10px;
}

/* Centered loading spinner used site wide */
#loading {
    background: url("../images/structure/easyspace-spinner.gif");
    background-size: contain;
    width: 50px;
    height: 72px;
    position: fixed;
    top: 50vh;
    left: 50%;
    margin-left: -25px;
    z-index: 199;
}

.ShowOnSmallScreen {
    display: none;
}

@media only screen and (min-width: 1024px) {
    body {
        padding-top: 0;
    }

    .wrapper {
        padding: 80px 40px;
    }

    h1 {
        font-size: 48px;
    }

    .desktoponly {
        display: block !important;
    }

    .mobileonly {
        display: none !important;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    .HideOnSmallScreen {
        display: none;
    }

    .ShowOnSmallScreen {
        display: inline-block;
    }
}

/* -------------------------------
   BUTTONS
   ------------------------------- */
button {
    font-family: "Open Sans";
}

.button {
    padding: 0;
}

/*---wrapper for buttons ---*/

.btn,
a.btn {
    cursor: pointer;
    padding: 0 10px;
    border-radius: 2px;
    border: none;
    background: rgba(0, 0, 0, 0.03);
    color: #999;
    display: block;
    width: 100%;
    max-width: 360px;
    text-align: center;
    text-decoration: none !important;
    margin: 5px 0 0;
    height: 47px;
    line-height: 47px;
    transition-duration: 0.4s;
}

.btn:after,
a.btn:after {
    content: "\f054";
    margin: 0 0 0 10px;
    font-family: FontAwesome;
    font-size: 0.68rem;
}

.btn:hover {
    color: #192a76;
}

input[type="submit"] {
    cursor: pointer;
}

.btn.buy,
input[type="submit"].buy {
    background: #2fbe49;
    padding: 0 20px;
    color: #fff !important;
}

.btn.buy:after,
input[type="submit"].buy:after {
    content: "";
    display: none;
}

.btn.buy:hover,
input[type="submit"].buy:hover {
    box-shadow: 0 100px 0 0 #3acc54 inset;
    transition-duration: 0.4s;
}

.btn.sml {
    display: inline-block;
    width: auto;
    margin: 0;
    float: right;
}

.btn-block {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

.centerbtn .btn,
.centerbtn a.btn {
    margin: 0 auto;
    display: block;
}

.ghostbtn,
a.ghostbtn {
    display: block;
    background: none;
    border: 1px solid #bbb;
    color: #787878;
    width: auto;
    padding: 0 20px;
}

.ghostbtn:hover {
    border-color: #333;
    color: #333;
}

a.config,
a.readmore {
    color: #192a76 !important;
    font-size: 14px;
    opacity: 1 !important;
}

a.config:before {
    content: '\f013';
    font-family: FontAwesome;
    color: #192a76;
}

a.readmore:before {
    content: '\f0f6';
    font-family: FontAwesome;
    color: #192a76;
}

.pulse:before {
    color: #192a76 !important;
}

.pulse:after {
    content: '';
    border: 3px solid #192a76;
    -webkit-border-radius: 30px;
    height: 40px;
    width: 40px;
    position: fixed;
    top: -50%;
    left: -60%;
    animation: pulse 1.4s ease-out infinite;
    -webkit-animation: pulse 1.4s ease-out infinite;
    -moz-animation: pulse 1.4s ease-out infinite;
    opacity: 0.0
}

@keyframes pulse {
    0% {
        transform: scale(0.4);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        transform: scale(1.2);
        opacity: 0.0;
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.4);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(1.2);
        opacity: 0.0;
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0.4);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -moz-transform: scale(1.2);
        opacity: 0.0;
    }
}

@media only screen and (min-width: 768px) {
    a.btn {
        display: inline-block;
        width: auto;
    }

    .btn-right,
    .btn-left {
        margin: 5px 0 10px;
        float: right;
    }

    .btn-left {
        float: left;
    }

    .centerbtn .btn,
    .centerbtn a.btn {
        max-width: 150px;
        display: block;
        margin: 0 auto;
    }
}

/*DROPDOWNS*/
.dropdown {
    position: relative;
    display: inline-block;
}

.topnav .toplinks .dropdown-content a {
    color: #fff;
}

.topnav .toplinks .dropdown-content a:hover {
    color: #eee;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #192a76;
    width: 130px;
    height: 41px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 0 17px;
    border: 1px solid #f1bfa7;
    z-index: 1;
    top: 44px;
    left: 10px;
    line-height: 12px;
}

.dropdown:hover .dropdown-content {
    display: block;
    z-index: 999;
}

/* ==========================================================================
   2. HEAD & NAV
   ========================================================================== */

header {
    top: 0;
    position: absolute;
    z-index: 6;
    width: 100%;
}

/* -------------------------------
   TOP NAV
   ------------------------------- */
.topnav {
    display: none;
    background: #fff;
    height: 56px;
}

.topnav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.topnav a:hover,
.topnav a:visited {
    color: white;
}

.topnav:after {
    content: "";
    display: table;
    clear: both;
}

.topnav .toplinks {
    float: right;
    line-height: 56px;
    color: #787878;
    font-size: 14px;
    padding-right: 8px;
    max-height: 56px;
}

.topnav .toplinks a {
    color: #192a76;
    text-decoration: none;
}

.topnav .toplinks a:hover {
    color: rgba(236, 95, 25, 1);
    text-decoration: underline;
}

.topnav .toplinks a i {
    margin: 10px 7px 10px 14px;
}

.topnav .toplinks a i.fa-shopping-cart {
    margin: 0 7px 0 0;
}

.topnav .toplinks a.cp-link {
    border: 1px solid #192a76;
    border-radius: 2px;
    margin: -7px 7px -7px 10px;
    padding: 7px 10px;
}

.topnav .toplinks a.cp-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

.topnav .toplinks a.cp-link i {
    margin-left: 0;
}

.toplinks a.navBusinessHours {
    color: #787878;
}

.toplinks a.navBusinessHours:hover {
    color: #666;
}

.backlink {
    display: none;
}

@media only screen and (min-width: 1024px) {
    header {
        position: relative;

    }

    .topnav {
        display: block;
    }
}

/* -------------------------------
   MAIN NAV
   ------------------------------- */
nav {
    width: 100%;
    display: block;
    height: 48px;
    transition: top 0.2s ease-in-out;
    z-index: 7;
}

nav.nav-background {
    background: #08233a;
}

nav a.logo {
    display: block;
    text-indent: -9999px;
    width: 140px;
    height: 100%;
    background: url("../images/structure/logo_server.png");
    background-size: 140px 100%;
    padding: 0;
    margin: 0 auto;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: none;
}

nav > ul {
    background: #fff;
}

nav ul li a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
}

nav > ul > li > a {
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
	
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
}

nav.nav-down > ul > li > a {
    height: 60px;
    line-height: 60px;
}

nav > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.14);
}

nav > ul > li > a.current {
    background: rgba(255, 255, 255, 0.14);
}

nav > ul > li > a.active {
    background: #fff;
    color: #192a76;
    position: relative;
    z-index: 13;
}

nav span {
    display: none;
}

nav .pre-search {
    color: #192a76;
    margin: 20px 0 0 20px;
    cursor: pointer;
    display: none;
}

nav.nav-down .pre-search {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.3em;
}

nav.nav-down .pre-search:hover {
    color: rgba(255, 255, 255, 1);
    font-size: 1.3em;
}

nav .headerdomain .fa-close {
    position: absolute;
    color: rgba(0, 0, 0, 0.2);
    top: 11px;
    left: 11px;
    font-size: 20px;
    display: none;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

nav .headerdomain .fa-close:hover {
    color: rgba(0, 0, 0, 0.2);
}

nav .headerdomain.active .fa-close {
    position: absolute;
    display: block;
}

nav .headerdomain {
    display: none;
    position: absolute;
    width: 100%;
    top: 48px;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

nav .headerdomain.active {
    display: block;
}

nav .headerdomain input[type="text"] {
    line-height: 40px;
    height: 40px;
    border: none;
    padding: 10px 16px 10px 44px;
    margin: 0;
    transition: all .3s ease-in-out;
    width: 100%;
}

nav .headerdomain button[type="submit"] {
    content: "\f002";
    font-family: FontAwesome;
    position: absolute;
    background: none;
    color: rgba(236, 95, 25, 1);
    width: 40px;
    height: 40px;
    border: none;
    top: 1px;
    right: 3px;
    transition: ease-in-out 0.3s;
    font-size: 1em;
    cursor: pointer;
}

nav .headerdomain.active {
    display: block;
}

nav.subnav-line {
    display: block;
    position: absolute;
    top: 120px;
    border-top: 2px solid rgba(255, 255, 255, 0.22);
    padding: 5px 9px;
    width: auto;
    margin-right: 48px;
    height: 41px;
    right: 0;
    z-index: 6;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

nav.subnav-line.nav-down {
    display: none;
}

nav.subnav-line li a {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    height: inherit;
    line-height: inherit;
}

nav.subnav-line li a:hover {
    color: #fff;
}

.navPromoDserver {
    text-align: center;
    color: #192a76;
}

.navPromoDserver a.imageLink,
.navPromoDserver a.imageLink img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    nav.subnav-line {
        background-color: #192a76;
    }
}

@media only screen and (min-width: 1024px) {
    nav {
        display: block;
        position: absolute;
        height: 80px;
        transition: ease-in-out 0.3s;
        padding: 16px 8px;
    }

    nav a.logo {
        float: left;
        width: 140px;
        height: 100%;
        background-size: 140px 100%;
        margin: 0 auto 0 10px;
        animation-fill-mode: both;
        animation-duration: 0.3s;
        animation-delay: 0.2s;
        animation-name: fadeinlogo;
    }

    nav ul {
        display: table;
        float: right;
        background: none;
		margin-right:30px;
    }

    nav ul li {
        display: table-cell;
    }

    nav ul.subs ul {
        display: inline-block;
        position: static;
        float: left;
        width: 33%;
    }

    nav ul.subs.navDservers ul {
        width: 48%;
    }

    nav ul.subs ul:after {
        display: table;
        content: "";
        clear: both;
    }

    .nav-down {
        top: 0;
        position: fixed;
        margin-top: 0;
        height: 60px;
        padding: 0;
    }

    .nav-down a.logo {
        width: 140px;
        height: 100%;
        background-size: 140px 100%;
        
        margin: 10px auto 0 12px;
        animation-fill-mode: both;
        animation-duration: 0.5s;
        animation-delay: 0.6s;
        animation-name: fadeinlogosmall;
    }

    nav > ul > li .show-seach {
        border-radius: 50px;
        padding: 10px 10px 10px 10px;
        width: 40px;
        text-indent: -9999em;
    }

    nav > ul > li .show-seach:before {
    }

    nav .pre-search {
        display: block;
    }

    nav .headerdomain button[type="submit"] {
        display: none;
    }

    nav .headerdomain .fa-close {
        top: 17px;
        left: 20px;
    }

    nav > ul > li:nth-of-type(12) a {
        padding-right: 40px;
    }

    nav > ul > li a {
        font-size: 13px;
    }

    nav > ul > li > a > span {
        position: absolute;
        width: 16px;
        display: none;
        top: 19px;
        right: 14px;
		
    }

    nav.nav-down > ul > li > a > span {
        top: 24px;
        right: 14px;
    }

    nav > ul > li > a span span {
        position: absolute;
        width: 100%;
        height: 3px;
        background: #fff;
        top: 0;
        left: 0;
        display: block;
    }

    nav > ul > li > a.active span span {
        background: #192a76;
    }

    nav > ul > li > a span span:nth-of-type(2) {
        top: 5px;
    }

    nav > ul > li > a span span:nth-of-type(3) {
        top: 10px;
    }
}

@media only screen and (min-width: 1024px) {
    nav {
        padding: 16px;
    }

    nav > ul {
        padding-right: 0;
    }

    nav > ul > li > a {
        padding: 0 12px;
    }

    nav .headerdomain {
        display: block;
        width: 260px;
        top: -56px;
        left: 0;
        background: none;
        position: absolute;
        float: left;
    }

    nav.nav-down .headerdomain {
        top: 0;
        left: 4px;
        position: relative;
    }

    nav.nav-down .headerdomain.active {
        width: 100%;
        top: 0;
        left: auto;
        position: relative;
        float: left;
    }

    nav .headerdomain input[type="text"] {
        line-height: 30px;
        height: 30px;
        margin: 12px 6px 6px;
        outline: none;
        padding: 10px 20px 10px 20px;
        width: 260px;
        text-indent: 0;
        position: relative;
        left: 50px;
        background: rgba(255, 255, 255, 0.0);
        transition: ease-in-out 0.3s;
        display: none;
        border-bottom: 3px solid #192a76;
    }

    nav .headerdomain input[type="text"]:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    nav .headerdomain.active input[type="text"] {
        border-radius: 0;
        padding: 4px 44px 1px 0;
        background: rgba(255, 255, 255, 0.9);
        text-indent: 0;
        display: block;
    }

    nav .headerdomain button[type="submit"] {
        top: 6px;
        right: 23px;
    }

    nav .headerdomain ::-webkit-input-placeholder {
        color: #bbb;
        font-family: "Open Sans", Arial;
    }

    nav .headerdomain :-moz-placeholder { /* Firefox 18- */
        color: #bbb;
        font-family: "Open Sans", Arial;
    }

    nav .headerdomain ::-moz-placeholder { /* Firefox 19+ */
        color: #bbb;
        font-family: "Open Sans", Arial;
    }

    nav .headerdomain :-ms-input-placeholder {
        color: #bbb;
        font-family: "Open Sans", Arial;
    }

    /* ------------------------------------------------------------------------
    HEADER DOMAIN SEARCH ON SCROLL
    ---------------------------------------------------------------------------*/
    nav.nav-down .headerdomain {
        width: 66px;
    }

    nav.nav-down .headerdomain.active {
        top: 0;
        right: 0;
        position: absolute;
        width: 96%;
        width: calc(100% - 51px);
        z-index: 2;
    }

    nav.nav-down .headerdomain ::-webkit-input-placeholder {
        color: #fff;
    }

    nav.nav-down .headerdomain :-moz-placeholder { /* Firefox 18- */
        color: #fff;
    }

    nav.nav-down .headerdomain ::-moz-placeholder { /* Firefox 19+ */
        color: #fff;
    }

    nav.nav-down .headerdomain :-ms-input-placeholder {
        color: #fff;
    }

    /* Change the white to any color ;) */
    nav.nav-down .headerdomain input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #fb9765 inset;
    }

    nav.nav-down .headerdomain.active input[type="text"] {
        width: calc(100% - 51px);
        border-radius: 0;
        background: #ee834d;
        text-indent: 0;
        margin: 1px;
        height: 58px;
        color: #fff !important;
        line-height: 58px;
        padding: 10px 16px 10px 20px;
        border: none;

    }

    nav.nav-down .headerdomain button[type="submit"] {
        top: 10px;
        right: 23px;
        font-size: 21px;
        color: #fff;
    }

    nav.nav-down .headerdomain .fa-close {
        color: rgba(0, 0, 0, 0.2);
        top: 20px;
        left: 17px;
    }
}

@media only screen and (min-width: 1100px) {
    nav .headerdomain i span {
        font-family: "Open Sans", Arial;
        display: inline-block;
        padding-left: 18px;
        font-size: 15px;
        transition: 0.3s ease-in-out;
    }

    nav .headerdomain i:hover span {
        padding-left: 22px;
    }

    nav.nav-down .headerdomain i span {
        display: none;
    }
}

@media only screen and (min-width: 1400px) {
    nav > ul > li > a {
        font-size: 16px;
    }
}

@keyframes fadeinlogo {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeinlogosmall {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* -------------------------------
   SUB NAV
   ------------------------------- */
nav ul.subs {
    background-color: #FFFFFF;
    color: #333333;
    display: none;
    right: 16px;
    padding: 2%;
    position: absolute;
    top: 64px;
    width: 100%;
    max-width: 1340px;
    z-index: 12;
    box-shadow: 0 14px 40px -6px rgba(0, 0, 0, 0.22);
}

nav.nav-down ul.subs {
    top: 60px;
    right: 0;
    transition: 0.2s ease-in-out;

}

nav li ul.subs.active {
    display: block;
}

nav ul.subs > li {
    display: block;
    float: none;
    vertical-align: top;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
    background: none;
    padding: 12px 10px;
    margin-bottom: 5px;
}

nav ul.subs > li a:after {
    clear: both;
    display: table;
    content: "";
}

nav ul.subs li ul {
    display: block;
    position: static;
}

nav ul.subs li ul:nth-child(2) {
    padding-right: 20px;
}

nav ul.subs li ul li {
    float: none;
    display: block;
    padding-left: 8px;
    transition: padding 150ms ease-out 0s;
}

nav ul.subs li ul li a {
    text-align: left;
    font-size: 18px;
    color: #2f2f2f;
    border: 1px solid #fff;
}

nav ul.subs li ul li a:hover {
    border: 1px solid #dfdfdf;
}

nav ul.subs li ul li.current a {
    border: 1px solid #192a76;
    border-left: 4px solid #192a76;
}

nav ul.subs li ul li a p {
    display: none;
    font-size: 14px;
}

@media only screen and (min-width: 1024px) {
    nav ul.subs li ul {
        position: relative;
        animation: slidenav 0.5s ease-out forwards;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    nav ul.subs li ul:nth-of-type(2) {
        animation-delay: 0.12s;
    }

    nav ul.subs li ul:nth-of-type(3) {
        animation-delay: 0.24s;
    }

    @keyframes slidenav {
        from {
            top: -14px;
            opacity: 0;
        }
        to {
            top: 0;
            opacity: 1;
        }
    }
}

/* -------------------------------
   STANDARD NAV ITEMS
   ------------------------------- */
nav ul.subs .standardnav {
    border-left: 1px solid #ddd;
    padding-left: 40px;
}

nav ul.subs .standardnav .fa {
    color: #fff;
    margin-right: 10px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}

nav ul.subs .standardnav .fa-rss {
    background: #192a76;
}

nav ul.subs .standardnav .fa-twitter {
    background: #6cadde;
}

nav ul.subs .standardnav .fa-facebook {
    background: #3b5998;
}

nav ul.subs .standardnav .fa-youtube-play {
    background: #192a76;
}

@media only screen and (min-width: 1024px) {
    nav ul.subs li ul li a p {
        display: block;
        margin: 5px 0 0 0;
        color: #787878;
    }
}

/* -------------------------------
   NAV DOMAIN SEARCH
   ------------------------------- */
nav ul.subs form {
    width: 98%;
    margin: 10px 10px 18px;
    position: relative;
    border: 1px solid #fff;
    color: #2f2f2f;
    font-size: 18px;
    text-align: left;
    opacity: 0;
}

nav ul.subs form input[type="text"] {
    width: 100%;
    padding: 10px 60px 10px 10px;
    line-height: 30px;
    height: 50px;
    font-size: 0.8em;
    color: #787878;
    border: 1px solid #ddd;
    margin: 0;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

nav ul.subs form input[type="text"]:focus {
    border-color: #999;
}

nav ul.subs form input[type="submit"] {
    width: 90px;
    margin: 0;
    border: 0;
    position: absolute;
    right: 0;
    top: 26px;
    height: 50px;
    padding: 10px 5px;
    font-size: 1em;
    line-height: 20px;
    color: #fff;
    background: url("../images/structure/search-white.png") no-repeat center center #2fbe49;
}

nav ul.subs form input[type="submit"]:hover {
    cursor: pointer;
}

@media only screen and (min-width: 1024px) {
    nav ul.subs form {
        width: 60%;
        margin-left: 18px;
        position: relative;
        animation: slidesearch 0.5s ease-out forwards;
        animation-fill-mode: forwards;
        animation-delay: 0.32s;
    }

    nav ul.subs form input {
        outline: none;
    }

    nav ul.subs form input[type="text"] {
        width: 100%;
        padding: 10px 248px 10px 10px;
    }

    nav ul.subs form select.searchnav {
        top: 32px;
        right: 94px;
        font-size: 0.8em;
    }

    @keyframes slidesearch {
        from {
            top: -14px;
            opacity: 0;
        }
        to {
            top: 0;
            opacity: 1
        }
    }
}

/* -------------------------------
   THIRD LEVEL NAV (in page nav)
   ------------------------------- */
.thirdnav {
    display: none;
    width: 100%;
    position: relative;
    z-index: 5;
    margin-top: 72px;
}

.thirdnav ul {
    margin: 0 auto -1px;
    padding: 0;
    list-style-type: none;
    display: table;
    border-collapse: collapse;
}

.thirdnav ul li {
    display: table-cell;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.thirdnav ul li a {
    display: block;
    padding: 14px 1px;
    margin: 0 7px;
    text-align: center;
    text-decoration: none;
    color: #24211f;
    transition: 0.3s ease-in-out;
    font-size: 0.88em;
}

.thirdnav ul li a:hover,
.thirdnav ul li a:visited {
    color: #24211f;
}

.thirdnav ul li a:hover {
    text-decoration: underline;
}

.thirdnav ul li.current {
    background: #fff;
}

.thirdnav ul li.current a {
    color: #192a76;
    border-bottom: 1px solid #192a76;
}

@media only screen and (min-width: 1024px) {
    .thirdnav {
        display: none;
        transition: .5s ease-in-out;
        margin-top: 0;
        top: 20px;
    }

    .thirdnav.fixed {
        position: fixed;
        top: 60px;
        box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
        background: #fff;
    }

    .thirdnav ul li a {
        padding: 14px 1px;
        margin: 0 14px;
        font-size: 1em;
    }

    .thirdnav.fixed ul li a {
        padding: 14px 16px;
    }

    .thirdnav.fixed ul li.current {
        border-bottom: 1px solid #192a76;
    }

    .thirdnav.fixed ul li.current a {
        border-bottom: none;
    }
}

/* -------------------------------
   BREADCRUMBS
   ------------------------------- */
.bread-container {
    width: 200px;
    position: absolute;
    top: 0;
}

.bread-container .wrapper {
    padding: 10px 10px;
    width: auto;
}

.bread-container .wrapper .breadcrumb {
    margin: 0;
}

.breadcrumb {
    list-style: outside none none;
    padding: 5px 0 0 0;
    display: none;
}

.breadcrumb > li {
    display: inline-block;
    font-size: 14px;
    text-transform: capitalize;
}

.breadcrumb > li + li::before {
    font-size: 16px;
    font-weight: 500;
    padding: 0 6px 0 12px;
}

.breadcrumb > li + li::before {
    color: #ccc;
    content: "> ";
    padding: 0 5px;
    line-height: 1em;
}

.breadcrumb > li a {
    color: #aaa !important;
    text-decoration: none !important;
    text-transform: capitalize;
}

.breadcrumb > li a:hover {
    text-decoration: underline !important;
}

.breadcrumb > li:empty {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .breadcrumb {
        display: block;
    }
}

@media only screen and (min-width: 1200px) {
    .bread-container .wrapper {
        padding: 10px 0;
    }
}

/* -------------------------------
   MOBILE ONLY NAV
   ------------------------------- */
/* common and top level styles */
.opennav {
    display: block;
}

.mobile-nav-bottom {
    display: none;
}

.mobile-showsearch {
    display: none;
}

@media only screen and (max-width: 1023px) {
    #mobile-icon {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 14px;
        left: 14px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }

    #mobile-icon span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #fff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    #mobile-icon span:nth-child(1) {
        top: 0;
    }

    #mobile-icon span:nth-child(2),
    #mobile-icon span:nth-child(3) {
        top: 8px;
    }

    #mobile-icon span:nth-child(4) {
        top: 16px;
    }

    #mobile-icon.open span:nth-child(1) {
        top: 18px;
        width: 0;
        left: 50%;
    }

    #mobile-icon.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #mobile-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #mobile-icon.open span:nth-child(4) {
        top: 18px;
        width: 0;
        left: 50%;
    }

    /* responsive rules */
    nav ul.opennav {
        box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
    }

    nav ul.subs form {
        display: none;
    }

    nav.nav-down ul.subs {
        top: 0;
    }

    nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }

    nav > ul > li > a {
        color: #2f2f2f;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    nav ul.subs li ul li a {
        font-size: 15px;
    }

    nav ul.subs li ul li a:before {
        content: "\f054";
        font-family: FontAwesome;
        color: #192a76;
        font-size: 10px;
        margin-right: 8px
    }

    nav ul.subs {
        position: relative;
        top: 0;
        transition: 0.5s ease-in-out;
        box-shadow: none;
        right: auto;
        padding: 20px;
    }

    nav li #s1:target + ul.subs,
    nav li #s2:target + ul.subs {
        display: block;
    }

    nav ul.subs > li {
        display: block;
        width: auto;
    }

    nav ul.subs li ul li {
        padding: 0 !important;
    }

    .mobile-showsearch {
        display: block;
        background: url("../images/structure/search-white.png") no-repeat;
        width: 19px;
        height: 19px;
        position: absolute;
        top: 15px;
        right: 16px;
        cursor: pointer;
    }
}

/* -------------------------------
   BOTTOM MOBILE NAV
   ------------------------------- */
.mobile-nav-bottom {
    display: block;
    width: 100%;
    height: 68px;
    padding: 0;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 12;
    background: rgba(0, 0, 0, 0.88);
}

.mobile-nav-bottom li {
    width: 25%;
    display: inline-block;
    float: left;
    margin: 0;
}

body.non-business-hours .mobile-nav-bottom li {
    width: 33%;
}

.mobile-nav-bottom li a {
    display: block;
    color: #fff;
    font-size: 12px;
    text-align: center;
    height: 68px;
    line-height: 1.4em;
    text-decoration: none;
    padding: 12px 2px 14px;
    transition: .25s ease-in-out;
    border-top: 3px solid rgba(0, 0, 0, 0);
}

.mobile-nav-bottom li a:hover,
.mobile-nav-bottom li a:focus {
    display: block;
    background: rgba(45, 45, 45, 0.90);
    border-top: 3px solid #192a76;
}

.mobile-nav-bottom li a i {
    display: block;
    font-size: 1.9em;
}

@media only screen and (min-width: 1024px) {
    .mobile-nav-bottom {
        display: none;
    }
}

/* -------------------------------
   INPAGE PAGINATION LIKE NAV
   ------------------------------- */
.inpage-nav {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .inpage-nav {
        position: absolute;
        display: block;
        overflow: hidden;
        top: 100px;
        right: 0;
        z-index: 1;
        visibility: hidden;
    }

    .inpage-nav li {
        list-style: none;
        padding: 3px;
        color: #333;
        border-radius: 20px;
        display: block;
    }

    .inpage-nav li:before {
        content: '';
        background: none !important;
    }

    .inpage-nav li a {
        width: 10px;
        height: 10px;
        padding: 0;
        display: inline-block;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
        margin: 0 40px 0 160px;
        color: #2f2f2f;
        position: relative;
    }

    .inpage-nav li a:after {
        content: "";
        background: none;
        width: 16px;
        height: 16px;
        border: 1px solid transparent;
        position: absolute;
        border-radius: 50%;
        top: -3px;
        left: -3px;
    }

    .inpage-nav li a:hover {
        background-color: #192a76;
    }

    .inpage-nav li a:hover:after {
        content: "";
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .inpage-nav li.current a {
        background-color: #192a76;
        color: #192a76;
    }

    .inpage-nav li.current a:after {
        content: "";
        border: 1px solid #192a76;
    }

    .inpage-nav li a span {
        transition: all 0.5s;
        font-size: 12px;
        position: absolute;
        right: 20px;
        top: -7px;
        text-align: right;
        min-width: 160px;
    }

    .inpage-nav li a:hover span {
        right: 30px;
    }

    .inpage-nav.stickyproductinpage {
        position: fixed;
        top: 160px;
    }
}

.searchnav
    /* ==========================================================================
   3. CONTENT - standard page layout
   ========================================================================== */
    /* -------------------------------
   BANNERS
   ------------------------------- */
.banner {
    width: 100%;
    background: /* url("/assets/images/content/banners/headtest.jpg") */ #000;
    background-position: calc(100% + 40px) calc(100% + 210px);
    transition: all 0.5s ease-in-out;
    z-index: 2;
    position: relative;
}

.banner .wrapper {
    position: relative;
    z-index: 4;
    padding: 90px 20px 20px;
}

.banner h1,
.banner p,
.banner a {
    color: #fff;
    margin: 0 auto 16px;
}

.banner p {
    line-height: 1.62em;
    text-align: center;
    letter-spacing: .08em;
    font-size: 0.92em;
    font-weight: 300;
    max-width: 660px;
}

.banner h1 {
    font-family: 'Titillium Web', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 40px;
    text-transform: uppercase;
}

.banner h1 span {
    font-family: 'Open Sans', sans-serif;
    color: #192a76;
    line-height: 1.3em;
    font-size: 15px;
}

.banner h1 > span:before {
    content: "#";
}

.banner form {
    width: 100%;
    margin: 30px auto 10px;
    position: relative;
}

form.domainsearch {
    position: relative;
    margin-top: 30px;
}

.banner form input[type="text"],
.wizard form.domainsearch input[type="text"] {
    width: 100%;
    padding: 10px 70px 10px 10px;
    line-height: 50px;
    height: 50px;
    font-size: 1.1em;
    color: #999;
    border: none;
    margin: 0;
}

.wizard form.domainsearch input[type="text"] {
    background: #fafafa;
}

.banner form input[type="submit"],
.banner form button[type="submit"],
.wizard form.domainsearch input[type="submit"] {
    width: 60px;
    margin: 0;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
    padding: 10px 5px;
    font-size: 1.1em;
    line-height: 30px;
    color: #fff;
    background: #8fca18;
}

.banner form input[type="submit"]:hover,
.banner form button[type="submit"]:hover,
.wizard form.domainsearch input[type="submit"]:hover {
    background: #3acc54;
}

form select.searchnav {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .banner {
        background-position: center;
    }

    .banner .wrapper {
        padding: 100px 0 60px;
        max-width: 980px;
    }

    .banner h1,
    .banner p {
        text-align: left;
        margin-left: 0;
    }

    .banner-centre .wrapper {
        padding: 100px 0 75px;
    }

    .banner-centre h1,
    .banner-centre p {
        text-align: center;
        max-width: 80%;
        margin: 0 auto;
    }

    .banner h1 {
        font-size: 46px;
    }

    .banner form input[type="text"],
    .banner form textarea,
    .wizard form.domainsearch input[type="text"] {
        width: 80%;
        width: calc(100% - 100px);
        padding: 20px 160px 20px 20px;
        line-height: 40px;
        height: 80px;
        font-size: 1.2em;
        color: #999;
        border: none;
        margin: 0;
    }

    .banner form textarea {
        height: 200px;
    }

    .wizard form.domainsearch input[type="text"] {
        background: #fafafa;
    }

    .banner form input[type="submit"],
    .banner form button[type="submit"],
    .wizard form.domainsearch input[type="submit"] {
        width: 100px;
        margin: 0;
        border: 0;
        position: absolute;
        right: 0;
        top: 0;
        height: 80px;
        padding: 20px 5px;
        font-size: 1.4em;
        line-height: 40px;
        color: #fff;
        background: #2fbe49;
    }

    form select.searchnav {
        position: absolute;
        top: 20px;
        line-height: 1.6em;
        padding: 10px;
        right: 120px;
        border: none;
        border-left: 1px solid #192a76;
        display: block;
        outline: none;
    }
}

@media only screen and (min-width: 1300px) {
    .banner {
        background-position: calc(100% + 180px) calc(100% + 180px);
    }

    .banner .wrapper {
        max-width: 1200px;
    }
}

@media only screen and (min-width: 1600px) {
    .banner {
        background-position: calc(100% + 20px) calc(100% + 180px);
    }
}

@media only screen and (min-width: 1800px) {
    .banner {
        background-position: center;
    }
}

@media only screen and (min-width: 2560px) {
    .banner {
        background-position: calc(100% + 0) calc(100% + 180px);
    }
}

/* -------------------------------
   HOME PROMO POINTS
   ------------------------------- */

.home-promo-points-container {
    position: relative;
}

.home-promo-points-container h3 {
    color: #ffa47f;
    text-align: left;
    margin: 0;
    position: absolute;
    top: 4px;
    font-weight: 700;
    font-style: italic;
}

ul.home-promo-points {
    position: absolute;
    left: 10px;
    top: 35px;
    margin: 0;
    list-style-type: none;
    text-align: left;
    padding: 0;
    font-size: 16px;
    z-index: 3;
}

ul.home-promo-points li {
    border: 1px solid transparent;
    border-left: 0;
    border-right: 0;
    margin: 0;
    padding: 3px;
}

ul.home-promo-points li:hover {
    cursor: pointer;
    border-color: rgba(255, 254, 254, 0.27);
    background-color: rgba(255, 255, 255, 0.04);
}

ul.home-promo-points li i.fa-chevron-right {
    color: rgba(255, 254, 254, 0.27);
}

ul.home-promo-points li:hover i.fa-chevron-right {
    color: #fff;
}

@media (max-width: 1799px) {
    .home-promo-points-container h3 {
        display: none;
    }

    ul.home-promo-points {
        top: 0;
        left: 0;
    }

    ul.home-promo-points li {
        margin: 0;
    }
}

@media (max-width: 1499px) {
    ul.home-promo-points li {
        margin: 10px 0;
    }
}

@media (max-width: 1365px) {
    .home-promo-points-container {
        display: none;
    }
}

@media (max-width: 1024px) {
    .home-promo-points-container {
        display: block;
    }

    ul.home-promo-points li {
        margin: 5px 0;
        display: inline-block;
    }
}

@media (max-width: 768px) {
    ul.home-promo-points {
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.28);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    ul.home-promo-points li {
        margin: 0;
    }

    ul.home-promo-points li i.fa-chevron-right {
        display: none;
    }

    ul.home-promo-points {
        font-size: 14px;
    }
}

@media (max-width: 399px) {
    .home-promo-points-container {
        display: none;
    }
}

/* -------------------------------
   CONTENT
   ------------------------------- */
#main {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 4;
    padding-top: 24px;
}

#main section:last-of-type {
    padding-bottom: 180px;
}

#main .wrapper h1 {
    /*font-family: 'Titillium Web', sans-serif;*/
    font-size: 30px;
    padding-bottom: 40px;
}

#main .wrapper h1 span {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 11px;
    padding-bottom: 11px;
}

#main .wrapper h1 span:before {
    content: '#';
}

#main .wrapper a,
#main .wrapper a:link,
#main .wrapper a:visited {
    color: #fff;
}
#main .wrapper.row a,
#main .wrapper.row a:link,
#main .wrapper.row a:visited {
    color: #fff;
}

#main .wrapper p a,
#main .wrapper p a:link,
#main .wrapper p a:visited,
#main .wrapper li a {
    border-bottom: 1px dotted #999;
}

#main .wrapper p a:hover,
#main .wrapper p a:focus {
    color: #192a76;
    border-bottom: 1px dotted #192a76;
}

#main .wrapper ul {
    padding: 0;
    margin: 16px 0 20px 0;
    list-style: none;
    font-size: 14px;
}

#main .wrapper ul li {
    padding: 0 0 4px 16px;
    position: relative;
}

#main .wrapper ul li:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    background: url("../images/structure/icon-sheet.png") 0 0 no-repeat;
    width: 5px;
    height: 10px;
}

#main .white-content {
    background: none;
}

#main .grey-content {
    background: #f7f9fc; /* Old browsers */
    background: -moz-linear-gradient(top, #f7f9fc 0%, #fcfdff 10%, #fcfdff 90%, #f7f9fc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f7f9fc 0%, #fcfdff 10%, #fcfdff 90%, #f7f9fc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7f9fc 0%, #fcfdff 10%, #fcfdff 90%, #f7f9fc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f9fc', endColorstr='#f7f9fc', GradientType=0); /* IE6-9 */
    position: relative;
}

#main .dark-content {
    background: #333;
    color: #fff;
    border-top: 4px solid #ba421a;
}

#main .dark-content .wrapper h1,
#main .dark-content .wrapper h3,
#main .dark-content .wrapper h4 {
    color: #fff;
}

#main .dark-content .wrapper h4 {
    margin-bottom: 0;
}

#main .dark-content p,
#main .dark-content p a,
#main .dark-content p a:link,
#main .dark-content p a:visited {
    color: #a2a2a2
}

#main .dark-content p a:hover {
    color: #192a76;
}

#main .full-width-image .wrapper {
    max-width: 1400px;
    padding: 0;
    margin-bottom: -100px;
}

#main .full-width-image .wrapper img {
    width: 100%;
}

#main img.smaller-icon {
    height: auto;
    width: 30%;
    margin: 10px 20px 0 0;
    float: left;
}

#main .instructions {
    width: 100%;
    display: block;
    background: #fff;
    border: 1px solid #f1f2f4;
    color: #333;
    padding: 40px;
    margin: 30px 0;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
}

#main .wrapper .instructions h3,
#main .wrapper .instructions h4 {
    color: #333;
    margin-top: 0;
    margin-bottom: 14px;
}

#main .wrapper .instructions p {
    margin-top: 0;
}

#main .instructions .col img {
    margin: 0 auto;
    display: block;
}

#main .instructions ol {
    margin: 0;
    padding: 0;
}

#main .instructions ol li {
    color: #192a76;
    font-weight: 700;
}

#main .instructions ol li span {
    color: #333;
    font-weight: 400;
    padding-left: 10px;
}

@media only screen and (min-width: 1024px) {
    #main {
        padding-top: 0;
    }

    #main .wrapper h1 span {
        font-size: 15px;
    }

    #main img.smaller-icon {
        width: 55%;
        margin: 0 auto;
        float: none;
    }

}

/* -------------------------------
   COLUMNS
   ------------------------------- */
.columns {
    display: flex;
    flex-wrap: wrap;
}

.columns:after {
    content: "";
    display: table;
    clear: both;
}

.col {
    float: left;
    display: inline-block;
    padding: 0 15px 16px;
    width: 100%;
}

.col12_5 {
    width: 50%;
}

.columns .col > ul {
    display: block;
    margin-top: 10px !important;
}

.columns .col > h4:first-child {
    margin-top: 10px
}

.columns > img {
    width: 100%;
    height: auto;
}

.columns .col img {
    display: flex;
    max-width: 600px;
    width: 100%;
    height: auto;
    min-height: 10px;
}

.columns .col50 img {
    display: block;
    max-width: 600px;
    width: 100%;
    height: auto;
    min-height: 10px;

}

.columns .col .price {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    margin: 0;
    opacity: 1;
}

.columns .col .price span {
    text-align: center;
    font-size: 21px;
    font-weight: 400;
    color: #192a76;
}

.columns .col .price b {
    font-weight: 400;
}

.columns .col .price span.offerinfo,
.columns .col .price span.oldprice {
    font-size: 13px;
    font-weight: 400;
    padding: 0 0 10px 0;
    color: #333;
    display: block;
}

.columns .col .price span.oldprice {
    text-decoration: line-through;
}

.columns .col .btn,
.columns .col a.btn {
    color: #192a76 !important;
    text-align: right;
    background: none;
}

.columns .col .btn:hover,
.columns .col .btn:hover {
    text-decoration: underline;
}

.columns .col .btn.buy,
.columns .col a.btn.buy {
    background: #2fbe49;
    color: #fff !important;
    text-align: center !important;
}

@media only screen and (min-width: 1024px) {
    .col {
        padding: 0 20px;
    }

    .col10 {
        width: 10%;
    }

    .col12_5 {
        width: 12.5%;
    }

    .col15 {
        width: 16.66666666%;
    }

    .col20 {
        width: 20%;
    }

    .col25 {
        width: 25%;
    }

    .col30 {
        width: 30%;
    }

    .col33 {
        width: 33%;
    }

    .col33:nth-of-type(2),
    .col33:nth-of-type(5),
    .col33:nth-of-type(8) {
        width: 34%;
    }

    .col35 {
        width: 35%;
    }

    .col40 {
        width: 40%;
    }

    .col50 {
        width: 50%;
    }

    .col60 {
        width: 60%;
    }

    .col65 {
        width: 65%;
    }

    .col70 {
        width: 70%;
    }

    .col75 {
        width: 75%;
    }

    .col80 {
        width: 80%;
    }

    .col90 {
        width: 90%;
    }

    .col100 {
        width: 100%;
        max-width: 940px;
        margin: 0 auto;
        float: none;
        display: block;
    }

    .wrapper-wide .col100 {
        max-width: 1600px;
    }

    .columns .col h1 {
        text-align: left;
        margin-left: -2px;
        padding-bottom: 0;
    }

    .columns .col100 h1 {
        text-align: center;
        margin: 0 auto;
        padding-bottom: 40px;
    }

    .columns .col .price {
        text-align: right;
    }

    .columns .col .price span.offerinfo,
    .columns .col .price span.oldprice {
        text-align: right;
    }

}

.box-image {
    width: 70%;
    min-height: 300px;
    margin: 0 auto;
}

/* -------------------------------
   FULL HEIGHT AND WIDTH IMAGE (images used here must used in column classes and be 900px x 590px always)
   ------------------------------- */
@media only screen and (min-width: 1024px) {
    .columns .col.full-height-image {
        margin: -80px 0 -80px 0;
        position: relative;

    }

    .columns .col.full-height-image img {
        max-width: 1200px;
        width: auto;
        position: absolute;
        top: 0;
        right: 20px;
        height: 100%;
    }
}

/* -------------------------------
   UPSELL COLUMNS (also used at bottom of most product pages)
   ------------------------------- */
.upsell .columns .col50 {
    background: #fff;
}

.upsell .columns .col50 h3 {
    text-align: center;
}

.upsell p {
    text-align: center;
    display: block;
}

.upsell .columns .col50 ul:after {
    clear: both;
    display: table;
    content: "";
}

.upsell .columns .col50 .btn {
    max-width: 100%;
}

.upsell .columns .col50 .price {
    text-align: center;
    border: 1px solid #eee;
    border-left: 0;
    border-right: 0;
    padding: 10px;
}

@media only screen and (min-width: 768px) {
    .upsell .columns .col50 {
        width: 40%;
        width: calc(50% - 40px);
        margin: 20px 20px 0;
        padding: 20px 40px;
    }

    .upsell .columns .col50 li {
        width: 50%;
        float: left;
    }
}

/* -------------------------------
   CONTENT-SLIDER (used various places across the site)
   ------------------------------- */
.content-slider {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f9fc+0,fcfdff+10,fcfdff+90,f7f9fc+100 */
    overflow: hidden;
    background: #f7f9fc; /* Old browsers */
    background: -moz-linear-gradient(top, #f7f9fc 0%, #fcfdff 10%, #fcfdff 90%, #f7f9fc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f7f9fc 0%, #fcfdff 10%, #fcfdff 90%, #f7f9fc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7f9fc 0%, #fcfdff 10%, #fcfdff 90%, #f7f9fc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f9fc', endColorstr='#f7f9fc', GradientType=0); /* IE6-9 */
}

.content-slider .col {
    float: none;
}

.content-slider .col50:first-of-type {
    display: none;
}

.content-slider .fa {
    color: #192a76;
    font-size: 40px;
}

.no-gradient {
    background: none
}

.padding-10-0 {
    padding: 10px 0
}

@media only screen and (min-width: 1024px) {
    .content-slider .col50:first-of-type {
        display: inline-block;
    }
}

/* -------------------------------
   PRODUCT COLUMNS (also used on domain extensions page)
   ------------------------------- */
.products .col {
    text-align: center;
    padding: 50px 50px;
    transition: all 0.13s ease-in-out;
    position: relative;
}

.products .col.popular,
.products .col.offer {
    background: rgba(0, 0, 0, 0.02) !important;
}

.products .col.offer .logo-icon {
    position: static;
    top: -40px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 50px;
    color: #3c86c8;
    text-shadow: 0 0 5px #fff;

}

.products .col.popular:before {
    content: "Most Popular";
    color: rgba(255, 255, 255, 1);
    background: rgba(27, 39, 64, 0.2);
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    padding: 0 10px;
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (min-width: 1024px) {
    .products .col.offer .logo-icon {
        position: absolute;
    }
}

.products .col {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.products .col:last-of-type {
    border-right: 0;
}

.products .col > * {
    padding: 7px 21px;
}

.products .col > img {
    padding: 21px 21px 4px;
}

/*.products .col p:last-of-type,
.products .col ul:last-of-type {
    flex: 1 0 auto;
} */
.products .col h3 {
    text-align: center;
    font-size: 1.76em;
    margin-bottom: 0;
}

.products .col h3 span {
    text-align: center;
    font-size: 0.5em;
    display: block;
    color: #192a76;
}

.products .col:hover h3 {
    color: #4bb5db;
}

#main .wrapper .products .columns a.col h3,
#main .wrapper .products .columns a.col p,
#main .wrapper .products .columns a.col a {
    text-decoration: none;
}

.products .col p,
.products .col a {
    text-align: center;
    opacity: 1;
}

.products .col a {
    color: #192a76 !important;
    position: relative;
}

#main .products .col a.btn,
#main .products .col form .btn {
    display: block;
}

#main .products .col form,
#main .products .col .button {
    padding-bottom: 0;
}

#main .products .col ul {
    padding: 0;
    margin: 0 0 20px;
}

.products .col li:before {
    background: none !important;
}

#main .products .col ul li {
    border-bottom: 1px solid #ddd;
    padding: 15px 21px;
    text-align: center;
}

#main .products .col ul li.title {
    height: 57px;
    background: #fafafa;
}

#main .products .col img {
    height: auto;
}

#main .products .col .icons:after {
    content: "";
    clear: both;
    display: table;
}

#main .products .col .icons img {
    width: auto;
    height: 31px;
    float: right;
    margin-right: 4px;
    background: none;
}

#main .products .comparison {
    padding: 0 40px;
}

#main .products .comparison .col ul {
    padding: 165px 0 0;
}

#main .products .comparison .col ul li {
    min-height: 57px;
    font-size: 0.88em;
}

#main .products .col .fa-windows,
#main .products .col .fa-linux,
#main .products .col .fa-check-circle {
    font-size: 1.3em;
}

#main .products .col .fa-windows {
    color: #00adef;
}

#main .products .col .fa-check-circle {
    color: rgba(0, 0, 0, 0.2);
}

#main .products .col .full-features {
    text-decoration: none !important;
    font-size: 0.9em;
    padding: 0 5px 5px;
    text-align: center;
    color: #192a76;
}

#main .products .col .full-features:after {
    content: "\f054";
    font-family: FontAwesome;
    font-size: 0.74em;
    margin-left: 7px;

}

#main .products .col img {
    width: 100%;
    height: auto;
}

#main .promo-fullwidth {
    border: 1px solid #192a76;
    color: #192a76;
    border-left: none;
    border-right: none;
    margin-bottom: 36px;
    padding: 7px 14px;
    animation-delay: 1.2s;
    opacity: 0;
}

#main .promo-fullwidth a {
    color: #192a76 !important;
}

#main .promo-fullwidth:hover a {
    color: #192a76 !important;
}

#main .promo-fullwidth .fa {
    padding-right: 14px;

}

#main .products .promo {
    padding: 8px 20px 8px 20px;
    margin: -4px 21px 10px;
    font-size: 0.76em;
    background: #fafafa;
    text-align: center !important;
    position: relative;
}

@media only screen and (max-width: 560px) {
    .products .col:nth-of-type(even) {
        background: rgba(0, 0, 0, 0.02);
    }

    .products .col.active {
        background: rgba(0, 0, 0, 0.02);
    }
}

@media only screen and (min-width: 560px) {
    #main .products .col {
        width: 50%;
        margin-bottom: 60px;
    }

    #main .products .col100 {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    #main .products .col {
        border-right: 1px solid #ddd;
    }

    #main .products a.col {
        border-bottom: 1px solid #ddd;
        padding-bottom: 14px;
    }

    #main .products a.col25:nth-of-type(4n) {
        border-right: none;

    }
}

@media only screen and (min-width: 1024px) {
    #main .products .col h3,
    #main .products .col h3 span,
    #main .products .col p,
    #main .products .col a,
    #main .products .col ul li,
    #main .products .col .full-features {
        text-align: right;
    }

    #main .products .col .full-features {
        padding: 0 20px 10px;
    }

    /*------- not sure what used for
    #main .products .col:nth-of-type(even) {
         background: none;
     }
     ----*/
    .products .col:hover {
        background: #fafafa;
    }

    #main .products .col {
        padding: 0;
    }

    #main .products .col:last-of-type {
        border-right: 0;
    }

    #main .products .col20 {
        width: 20%;
    }

    #main .products .col25 {
        width: 25%;
    }

    #main .products .col33 {
        width: 33%;
    }

    #main .products .col33:nth-of-type(3n) {
        border-right: none;
    }

    #main .products .col33:last-of-type,
    #main .products .col33:nth-last-of-type(2),
    #main .products .col33:nth-last-of-type(3),
    #main .products .col25:last-of-type,
    #main .products .col25:nth-last-of-type(2),
    #main .products .col25:nth-last-of-type(3),
    #main .products .col25:nth-last-of-type(4),
    #main .products .col20:last-of-type,
    #main .products .col20:nth-last-of-type(2),
    #main .products .col20:nth-last-of-type(3),
    #main .products .col20:nth-last-of-type(4),
    #main .products .col20:nth-last-of-type(5) {
        border-bottom: none;
    }
}

/* Ad banners that run next to packages and in nav
--------------------------------------------------------------------*/
.product-push,
#main .products .col.product-push,
nav ul.subs > li a.product-push {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b628c9+0,192a76+50,192a76+72,f2981a+100 */
    background: #b628c9; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b628c9', endColorstr='#f2981a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    border-left: 8px solid #fff;
    border-bottom: 0;
    margin-bottom: 60px;
    color: #fff;
    overflow: hidden;
}

.product-push:after {
    content: "\f054 \f054 \a \f054  \f054 \a \f054  \f054\f054  \f054 \a \f054  \f054";
    color: rgba(255, 255, 255, 0.14);
    font-size: 16em;
    line-height: 0.7em;
    position: absolute;
    left: -400px;
    top: 0;
    font-family: FontAwesome;
    transition: 0.3s ease-in-out;
}

.product-push:hover:after {
    left: -370px;
}

.product-push h3,
a.product-push h3 {
    color: #fff !important;
    font-size: 1.85em;
    line-height: 1.06em;
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
}

.product-push h3 {
    font-size: 2.1em;
}

.product-push p {
    color: rgba(255, 255, 255, 0.82);
}

.product-push .full-features,
#main .products .col.product-push .full-features,
#main .products a.col.product-push .full-features {
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-left: none;
    border-right: none;
    width: 100%;
    width: calc(100% - 40px);
    margin: 30px auto 10px;
    padding: 12px 0;
    text-align: center;
}

nav ul.subs > li a.product-push {
    width: 100%;
    text-align: right;
    padding: 36px;
}

nav ul.subs > li a.product-push h3 {
    padding-top: 0;
    margin-top: 0;
}

nav ul.subs > li a.product-push .full-features:after {
    width: 100%;
    content: "\f054";
    font-family: FontAwesome;
    color: #fff;
    margin-left: 5px;
    font-size: 0.8em;
}

/* -------------------------------
   LEARNMORE COLUMNS (Used in conjunction with products cols)
   ------------------------------- */
#main .learnmore .col,
#main .learnmore a.col {
    margin-bottom: 0;
    padding-bottom: 60px;
}

#main .learnmore .col:hover,
#main .learnmore a.col:hover {
    background: rgba(73, 91, 115, 0.04);
}

#main .learnmore .col:after {
    content: "";
    background: url("../images/structure/box-more-options.png");
    opacity: 0;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 20px;
    left: 20px;
    transition: ease-out 0.2s;
    transition-delay: 0s;
}

#main .learnmore .col:hover:after {
    content: "";
    background: url("../images/structure/box-more-options.png");
    opacity: 1;
    transition: ease-in 0.2s;
    transition-delay: 0.1s;
    z-index: 2;
}

#main .learnmore .col .btn {
    position: absolute;
    bottom: 10px;
}

/* -------------------------------
   DISCOUNT PAGE COLUMNS (Used in conjunction with products cols)
   ------------------------------- */
#main .sale .col h1 {
    background-color: #376bb0;
    display: block;
    text-align: center;
    width: 80%;
    width: calc(100% - 40px);
    padding: 60px 10px;
    margin: 20px;
    position: relative;
    overflow: hidden;
}

#main .sale .col h1 span {
    color: #fff;
    font-style: normal;
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    padding: 0;
    z-index: 2;
}

#main .sale .col h1 span:before {
    content: '';

}

#main .sale .col h1:before {
    content: "sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale sale ";
    position: absolute;
    width: 130%;
    top: -50px;
    left: -17px;
    color: rgba(255, 255, 255, 0.16);
    transform: rotate(-15deg);
    z-index: 1;
    font-weight: 600;
}

#main .sale .col:nth-of-type(2n) h1 {
    background: #509445;
}

#main .sale .col:nth-of-type(3n) h1 {
    background: #376bb0;
}

#main .sale .col:nth-of-type(4n) h1 {
    background: #ef3b39;
}

#main .sale .col:nth-of-type(5n) h1 {
    background: #787878;
}

/* -------------------------------
   Highlighted Content Block
   ------------------------------- */
.highlight {
    margin: 18px 0;
    padding: 20px 20px 0;
    background: #eee;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
}

.highlight img {
    width: 100%;
    height: auto;
}

.highlight p {
    text-align: center;
    display: block;
    background: #333;
    color: #fff;
    margin: 0 -20px -5px;
    padding: 20px 10px;
}

.highlight-box .col {
    padding: 0 10px;
}

.highlight-box .col > div {
    margin: 18px 0;
    padding: 10px 30px;
    background: #f4f4f4;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
}

.highlight-box-white .col > div {
    background: #fff;
}

/* -------------------------------
   SLIDEUP BOX COLUMN ANIMATION (example domain transfer page)
   ------------------------------- */
.slideup-box .col {
    visibility: hidden;
}

.slideup-box.no-animation .col {
    visibility: visible;
}

.slideup-box .col div {
    text-align: center;
    background: #fff;
    border-radius: 4px;
    padding: 0 0 20px;
    margin-bottom: 40px;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
}

.slideup-box .col h4 {
    min-height: 55px;
}

.slideup-box .col a {
    padding: 0 10px;
}

.slideup-box .col p {
    min-height: 265px;
}

@media only screen and (max-width: 1200px) {
    .slideup-box .col p {
        min-height: 320px;
    }
}

@media only screen and (max-width: 1024px) {
    .slideup-box .col p {
        min-height: inherit;
    }

    .columns .col .btn, .columns .col a.btn {
        text-align: center;
    }
}

.slideup-box .col div h4 {
    color: #333 !important;
    padding: 0 10px;
    margin-bottom: 0;
}

.slideup-box .col div p {
    padding: 0 40px;
    flex: 1 0 auto;
    text-align: left;
}

.slideup-box .col20 div p,
.slideup-box .col25 div p {
    padding: 0 20px;
}

.slideup-box .col div .btn {
    margin: 20px auto;
}

.slideup-box .col span {
    background: #192a76;
    width: 100%;
    height: 160px;
    display: block;
    margin: 0;
    padding: 30px 10px;
    border-radius: 4px 4px 0 0;
}

.slideup-box .col span:after {
    content: "";
    display: table;
    clear: both;
}

.slideup-box .col span span {
    background: #192a76;
    color: #fff;
    font-size: 40px;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    border-radius: 50%;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 70px;
    border: 2px solid #fff;
    position: relative;
    z-index: 3;
}

.slideup-box .col:nth-of-type(2) span {
    background: #5FCF80;
}

.slideup-box .col:nth-of-type(3) span {
    background: #41B3D5;
}

.slideup-box .col:nth-of-type(4) span {
    background: #ab66ba;
}

/* -------------------------------
   DOMAIN OFFERS
   ------------------------------- */
.domain-offers {
    margin: 0 auto;
    padding: 20px 40px 0;
    max-width: 1900px;
    overflow: hidden;
}

.domain-offers .col {
    padding: 0;
    width: 50%;
    position: relative;
    bottom: 0;
}

.domain-offers .col img {
    width: 100%;
    height: auto;
    transition: all 0.5s ease-in-out;
    position: relative;
    z-index: 0;
}

.domain-offers .col img:hover {
    width: 105%;
    height: auto;
    margin-top: -10px;
    margin-left: -10px;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
    z-index: 3;
}

@media only screen and (min-width: 768px) {
    .domain-offers .col {
        width: 16.66666%;
    }
}

@media only screen and (min-width: 1024px) {
    .domain-offers {
        padding: 40px 50px 0;
        max-width: 1800px;
    }

    .domain-offers .col img:hover {
        margin-top: -13px;
    }
}

/* -------------------------------
   DOMAIN RESULTS
   ------------------------------- */
.result-row {
    position: relative;
}

#extra_domains_popup {
    background: #fff;
    width: 600px;
    position: fixed;
    top: 50%;
    margin-top: -200px;
    left: 50%;
    margin-left: -300px;
    z-index: 2010;
    display: none;
}

#extra_domains_popup h1 {
    background: #192a76;
    color: #fff;
    font-size: 23px;
    text-transform: none;
    padding: 20px 40px;
    text-align: center;
    font-weight: normal;
}

#extra_domains_popup h2 {
    font-size: 18px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 18px 0 20px 0;
    text-align: center;
    text-transform: none;
    font-weight: normal;
}

#extra_domains_popup .wrapper {
    padding: 20px 40px 20px 40px;
}

#extra_domains_popup .wrapper p {
    font-size: 15px;
}

#extra_domains_popup .wrapper p b {
    font-weight: bold;
}

#dark_overlay {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2005;
    display: none;
}

/*EasyMail Popup*/
.popup_modal {
    background: #fff;
    width: 600px;
    position: fixed;
    top: 50%;
    margin-top: -200px;
    left: 50%;
    margin-left: -300px;
    z-index: 2010;
    display: none;
}

.popup_modal h1 i {
    content: '\f2d3';
    font-size: 18px;
    font-family: FontAwesome, serif;
    color: #f1bfa7;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.popup_modal h1 i:hover {
    color: #fff;
    cursor: pointer;
}

.popup_modal .innercontent {
    text-align: center;
}

.popup_modal h1 {
    background: #192a76;
    color: #fff;
    font-size: 18px;
    text-transform: none;
    padding: 12px 0;
    text-align: center;
    font-weight: normal;
    margin: 0;
}

.popup_modal .wrapper {
    padding: 15px;
}

@media only screen and (max-width: 768px) {
    .popup_modal {
        width: 100%;
        left: 0;
        top: 8%;
        margin-top: 0;
        margin-left: 0;
    }

    .popup_modal h1 i {
        padding: 5px 0 5px 19px;
        background-color: #192a76;
    }

    .popup_modal .btn {
        max-width: 100%;
    }
}

/* -------------------------------
   TABS
   ------------------------------- */
.tabs-menu {
    height: auto;
    clear: both;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.tabs-menu a {
    line-height: 40px;
    margin: 0 5px;
    background: none;
    padding: 16px 6px;
    color: #ababab !important;
    border-radius: 2px;
    text-align: center;
    text-decoration: none !important;
    display: block;
    transition: all 0.3s ease-in-out;
}

.tabs-menu a:hover {
    color: #333 !important;
}

.tabs-menu a.current {
    position: relative;
    background-color: #ededed;
    background-color: rgba(0, 0, 0, 0.075);
    color: #333 !important;
}

.tabs-menu a i {
    padding-right: 5px;
    transition: all 0.3s ease-in-out;
}

.tabs-menu a:hover i,
.tabs-menu a.current i {
    color: #333;
}

.tab {
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
    width: 100%;
    padding: 20px;
    display: none;
}

#tab-1,
#tab-a {
    display: block;
}

.full-width-tabs .wrapper {
}

.full-width-tabs .tabs-menu {
    width: auto;
    border-bottom: 1px solid #444;
    padding: 0 2px;
    height: auto;
    margin: 0;
}

.full-width-tabs .tab-content {
    padding: 0;
    display: none !important;
    transition: all 0.5s;
}

.full-width-tabs .tab-content.current {
    display: block !important;
}

.full-width-tabs .tabs-menu a {
    line-height: 70px;
    height: 70px;
    margin: 0;
    display: inline-block;
    background: none;
    padding: 0 6px;
    color: #898989 !important;
    border-radius: 2px;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
}

.full-width-tabs .tabs-menu a:hover {
    color: #bbb !important;
}

.full-width-tabs .tabs-menu a.current {
    position: relative;
    background-color: #ededed;
    background-color: rgba(0, 0, 0, 0.075);
    color: #fff !important;
}

.full-width-tabs .prev,
.full-width-tabs .next {
    border: 1px solid rgba(255, 255, 255, 0.89);
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #fff;
    position: absolute;
    background: none;
    border-radius: 50%;
    top: 300px;
    left: -70px;
    transition: all 0.5s;
}

.full-width-tabs .prev:hover,
.full-width-tabs .next:hover {
    border: 1px solid rgba(255, 255, 255, 1);
}

.full-width-tabs .prev:disabled,
.full-width-tabs .next:disabled {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.2);
}

.full-width-tabs .next {
    left: auto;
    right: -70px;
}

@media only screen and (min-width: 1024px) {
    .tabs-menu {
        height: 40px;
        margin: 16px auto;
    }

    .tabs-menu a {
        height: 40px;
        display: inline;
        padding: 16px 20px;
    }

    .full-width-tabs .tabs-menu a {
        padding: 0 20px;
    }
}

/* ---- GREY BG Specific styles ---- */
.grey-content .full-width-tabs .tabs-menu {
    border-bottom: 1px solid #eee;
    background: #fff;
}

.grey-content .full-width-tabs .tabs-menu a {
    color: #898989 !important;
    border-radius: 0;
    margin-bottom: -2px;
    border: 1px solid transparent;
    position: relative;
}

.grey-content .full-width-tabs .tabs-menu a:hover {
    color: #bbb !important;
}

.grey-content .full-width-tabs .tabs-menu a:hover .fa {
    color: #bbb !important;
}

.grey-content .full-width-tabs .tabs-menu a.current {
    background-color: #FAFBFE;
    color: #2f2f2f !important;
    border: 1px solid #eee;
    border-bottom-color: #FAFBFE;
}

.grey-content .full-width-tabs .tabs-menu a.current:after {
    content: '';
    width: 30px;
    height: 4px;
    background-color: #192a76;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -15px;
}

.grey-content .full-width-tabs .tabs-menu a.current .fa {
    color: #2f2f2f !important;
}

/*-----------------------------------
make buy now price and product name stick to the top of the page
 */
.stickyproducttabs {
    position: fixed;
    width: 100% !important;
    display: block;
    background: #fff;
    top: 59px;
    left: 0;
    z-index: 3;
}

/* -------------------------------
   FEATURES (List with text)
   ------------------------------- */
.featureslist .col h4 .fa {
    font-size: 30px;
    margin: 0 6px 0 0;
    line-height: 30px;
    color: #192a76;

}

.featureslist .col h4:nth-of-type(2n) .fa {
    color: #fff;
}

.featureslist .col h4:nth-of-type(3n) .fa {
    color: #d54b3d;
}

.featureslist .col h4:nth-of-type(4n) .fa {
    color: #2e9dd7;
}

.featureslist .col:nth-of-type(2) h4:nth-of-type(1n) .fa {
    color: #e8d137;
}

.featureslist .col:nth-of-type(2) h4:nth-of-type(2n) .fa {
    color: #69ca66;
}

.featureslist .col:nth-of-type(2) h4:nth-of-type(3n) .fa {
    color: #fff;
}

.featureslist .col:nth-of-type(2) h4:nth-of-type(4n) .fa {
    color: #192a76;
}

.featureslist .col p {
    margin-top: 5px;
}

/* -------------------------------
   FEATURES (List with large icon no text)
   ------------------------------- */
.iconlist {
    padding-top: 40px;
}

.iconlist .col {
    padding: 40px;
    transition: all 0.3s;
}

.iconlist .col25 {
    width: 50%;
}

.iconlist .col:hover {
    background: rgba(255, 255, 255, 0.025);

}

.iconlist .col h4 {
    text-align: center;
    color: rgba(0, 0, 0, 0.6) !important;
    text-transform: capitalize;

}

.iconlist .col h4 .fa {
    font-size: 40px;
    margin: 0 auto 10px;
    line-height: 40px;
    color: #192a76 !important;
    display: block;
}

.iconlist .col33:nth-of-type(3n) {
    border-right: none;
}

.iconlist .col20:nth-of-type(5n) {
    border-right: none;
}

.iconlist .col:nth-of-type(2n) h4 .fa {
    color: #fff;
}

.iconlist .col:nth-of-type(3n) h4 .fa {
    color: #d54b3d;
}

.iconlist .col:nth-of-type(4n) h4 .fa {
    color: #2e9dd7;
}

.iconlist .col:nth-of-type(2) h4:nth-of-type(1n) .fa {
    color: #e8d137;
}

.iconlist .col:nth-of-type(2) h4:nth-of-type(2n) .fa {
    color: #69ca66;
}

.iconlist .col:nth-of-type(2) h4:nth-of-type(3n) .fa {
    color: #fff;
}

.iconlist .col:nth-of-type(2) h4:nth-of-type(4n) .fa {
    color: #192a76;
}

@media only screen and (min-width: 1024px) {
    .iconlist .col {
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
    }

    .iconlist .col:last-of-type {
        border-right: none;
        border-bottom: 1px solid #e4e4e4;
    }

    .iconlist .col25 {
        width: 25%;
    }

    .iconlist .col100 {
        border: none !important;
    }

    .iconlist .col33:last-of-type,
    .iconlist .col33:nth-last-of-type(2),
    .iconlist .col33:nth-last-of-type(3),
    .iconlist .col25:last-of-type,
    .iconlist .col25:nth-last-of-type(2),
    .iconlist .col25:nth-last-of-type(3),
    .iconlist .col25:nth-last-of-type(4),
    .iconlist .col20:last-of-type,
    .iconlist .col20:nth-last-of-type(2),
    .iconlist .col20:nth-last-of-type(3),
    .iconlist .col20:nth-last-of-type(4),
    .iconlist .col20:nth-last-of-type(5) {
        border-bottom: none;
    }
}

/* -------------------------------
   SUMMARY BANNERS - (act as click throughs to customer review or highlighting a special offer)
   ------------------------------- */
.summary-banner {
    background: #fafafa;
    display: none;
}

.summary-banner .wrapper {
    padding: 20px 100px;
}

.summary-banner .wrapper .col {
    padding: 0;
}

.summary-banner .wrapper .quote {
    border-left: 1px solid rgba(0, 0, 0, 0.14);
    position: relative;
    padding: 0 50px 0 90px;
}

.summary-banner .wrapper .quote:before,
.summary-banner .wrapper .quote:after {
    content: '\f10d';
    font-size: 40px;
    font-family: FontAwesome;
    color: #e3e3e3;
    position: absolute;
    top: -20px;
    left: 26px;

}

.summary-banner .wrapper .quote:after {
    content: '\f10e';
    top: auto;
    left: auto;
    right: 10px;
    bottom: 00px;
}

.summary-banner .wrapper .col img {
    max-height: 100px;
    width: auto;
}

@media only screen and (min-width: 1024px) {
    .summary-banner {
        display: block;
    }
}

/* -------------------------------
   DEDICATED SERVERS
   ------------------------------- */
.dedicated-servers {
    display: block;
    width: 100%;
    overflow: hidden;
}

@media only screen and (min-width: 1024px) {
    .dedicated-servers {
        /* SlickSlider takes time to adjust in the page */
        height: 744px;
    }
}

.dedicated-servers .wrapper {
    position: relative;
    transition: all 1s;
}

.dedicated-servers .columns {
    position: absolute;
    width: 100%;
    display: inline-block;
}

.dedicated-servers .beast {
    font-family: 'Sigmar One', cursive;
    font-size: 1.6em;
}

.dedicated-servers .part2 {
    transition: all 1s;
    opacity: 0;
    right: -240%;
}

.dedicated-servers .part1 {
    opacity: 0;
    left: -240%;
    transition: all 1s;
}

.dedicated-servers .part1.active {
    left: 0;
    transition: all 1s;
    opacity: 1;
}

.dedicated-servers .part2.active {
    opacity: 1;
    right: 0;
    display: block;
    transition: all 1s;
}

.dedicated-servers a.previous {
    position: absolute;
    top: -50px;
    right: 20px;
    border: 1px solid;
    border-image: linear-gradient(to left, rgba(236, 95, 25, 1) 1%, rgba(236, 95, 25, 0) 100%);
    border-image-slice: 1;
    border-left: none;
    border-right: none;
    padding: 5px 0 5px 230px;
    color: rgba(236, 95, 25, 1) !important;
}

.dedicated-servers a.previous:hover {
    color: rgba(236, 95, 25, 0.7) !important;
}

.dedicated-servers a.previous .fa {
    font-size: 0.8rem;
}

h1.product-page {
    font-size: 18px !important;
    text-align: left;
    padding: 7px 10px 10px !important;
    margin: 0 !important;
    line-height: 1.8rem;
    position: fixed;
    bottom: 68px;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #ddd;
}

h1.product-page span {
    display: block;
    line-height: 0.1rem;
    padding-top: 20px;
}

h1.product-page .btn,
h1.product-page input[type="submit"].btn {
    font-size: 15px;
    float: right;
    padding: 0 12px;
    text-transform: none;
    margin-top: -20px;
    font-family: "Open Sans", serif;
    font-weight: 400;
    display: inline;
    width: auto;
}

h1.product-page form {
    float: right;
}

h1.product-page .price {
    display: none;
}

h1.product-page:after {
    clear: both;
    display: table;
    content: "";
}

.product-rating {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.product-rating:after {
    clear: both;
    display: table;
    content: "";
}

.product-rating .fa-star {
    color: #192a76;
    margin-left: 3px;
}

.product-rating h4.col70 {
    float: right;
    width: 70%;
}

.product-rating .col30 {
    width: 30%;
    text-align: right;
}

@media only screen and (min-width: 768px) {
    h1.product-page .btn,
    h1.product-page input[type="submit"].btn {
        padding: 0 14px;
    }

    .dedicated-servers .part2 {
        right: -105%;
    }

    .dedicated-servers .part2.active {
        right: 0;
    }

    .dedicated-servers .part1 {
        left: -105%;
    }

    .dedicated-servers .part1.active {
        left: 0;
    }
}

.dedicated-servers-info {
    background: #333 url("../images/content/backgrounds/easyspace-background-icon.png") no-repeat right 60px top 0;
    border-top: 4px solid #ba421a;
}

.dedicated-servers-info .wrapper h1,
.dedicated-servers-info .wrapper p {
    color: #fff;
}

.dedicated-servers-info .wrapper .col100 img {
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin: 30px auto 10px;
}

.dedicated-servers-info .wrapper ul.col,
.dedicated-servers-info .wrapper ul.col h4 {
    color: #fff;
}

.dedicated-servers-info .wrapper ul.col h4 {
    border-bottom: 4px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 10px !important;
    font-size: 1.1rem;
}

.dedicated-servers-info .wrapper ul.col25 {
    padding: 0 !important;
    position: relative;
}

.dedicated-servers-info .wrapper ul.col25 > div {

    padding: 10px 30px 30px;
}

.dedicated-servers-info .wrapper ul.col.active > div {
    background: #fff;
    color: #333;
}

.dedicated-servers-info .wrapper ul.col.active h4 {
    color: #3f3f3f !important;
}

.dedicated-servers-info .wrapper ul.col.active h4 {
    border-bottom: 4px solid #3f3f3f;
}

.dedicated-servers-info .wrapper ul li::before {
    background: url("../images/structure/icon-sheet.png") no-repeat scroll -7px 0 !important;
}

.dedicated-servers-info .wrapper ul.active li::before {
    background: url("../images/structure/icon-sheet.png") no-repeat scroll 0 0 !important;
}

.dedicated-servers-info .wrapper ul .line1 {
    display: none;
}

.wrapper ul.breakdown {
    padding: 0 !important;
    margin-right: 10px !important;
    margin-top: 0px !important;
    background: #fff;

}

.wrapper ul.breakdown:after {
    content: "";
    clear: both;
    display: table;
}

.wrapper ul.breakdown li {
    width: 100%;
    float: left;
    display: inline-block;
    border-bottom: 1px solid #eee;
    padding: 20px 10px 20px 20px !important;
    font-size: 0.8rem;
    font-weight: 400;
    position: relative;
}

.wrapper ul.breakdown li:first-of-type {
    width: 100%;
    float: none;
    font-size: 1.1rem;
    border-right: none !important;
    padding-top: 25px !important;
}

.wrapper ul.breakdown-single li:first-of-type {
    width: 100%;
    font-size: 1rem;
    border-right: none !important;
    padding-top: 20px !important;
}

.wrapper ul.breakdown li:first-of-type img {
    margin-top: -40px;
}

ul.breakdown li:before {
    display: none;
}

ul.breakdown li:nth-of-type(2n+1) {
    border-right: none !important;
}

.wrapper ul.breakdown li h3 {
    margin-top: 0;
}

.wrapper ul.breakdown li i {
    background-image: url("../images/structure/icon-sheet.png");
    width: 22px;
    height: 21px;
    display: inline-block;
    position: absolute;
    top: 24px;
    left: 18px;
}

.wrapper ul.breakdown li.cpu,
.wrapper ul.breakdown li.ram,
.wrapper ul.breakdown li.antivirus {
    padding-left: 56px !important;
}

.wrapper ul.breakdown li.cpu i {
    background-position: -374px 0;
    top: 30px;

}

.wrapper ul.breakdown li.ram i {
    background-position: -257px 0;
    width: 27px;
    height: 17px;
    top: 23px;
}

.wrapper ul.breakdown li.antivirus i {
    background-position: -505px 0;
}

.wrapper ul.breakdown li .fa {
    background: none;
    position: static;
    color: #192a76;
    margin-right: 10px;
    font-size: 1.1rem;
}

.wrapper ul.breakdown li:last-of-type:after {
    content: "";
    clear: both;
    display: table;

}

@media only screen and (min-width: 600px) {
    .wrapper ul.breakdown li {
        width: 50%;
        border-right: 1px solid #eee;
    }

    .wrapper ul.breakdown-single li {
        width: 100%;
        border-right: none;
    }
}

@media only screen and (min-width: 1024px) {
    h1.product-page {
        font-size: 32px !important;
        position: static;
        padding: 0 0 16px 0 !important;
        border: none;
        transition: 0.4s ease-in-out;
    }

    h1.product-page span {
        line-height: 1rem;
        padding-top: 0;
    }

    /*-----------------------------------
    make buy now price and product name stick to the top of the page
     */
    h1.stickyproductbuy {
        position: fixed;
        width: 100%;
        background: #fff;
        top: 59.6px;
        left: 0;
        height: 60px;
        border-bottom: 1px solid #ccc;
        padding: 10px 0 0 10px !important;
        font-size: 1.4rem !important;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        z-index: 3;
    }

    h1.stickyproductbuy > div {
        margin: 0 auto;
        max-width: 1100px;
    }

    h1.stickyproductbuy span {
        font-size: 0.8rem !important;
        padding: 0 !important;
    }

    h1.stickyproductbuy .btn,
    h1.stickyproductbuy input[type="submit"].btn {
        margin: -20px 6px 0 0;
        position: relative;
    }

    h1.stickyproductbuy .btn:after,
    h1.stickyproductbuy input[type="submit"].btn:after {
        content: '';
        width: 1px;
        height: 30px;
        background: #ddd;
        display: block;
        position: absolute;
        left: -26px;
        top: 11px;
    }

    h1.stickyproductbuy .price {
        display: block;
        position: absolute;
        font-size: 1.3rem;
        top: -37px;
        right: 126px;
        padding: 0 14px;
    }

    h1.stickyproductbuy .price-two-buttons {
        right: 234px;

    }

    .dedicated-servers-info .wrapper .col100 img {
        margin: 30px auto -156px;
    }

    .dedicated-servers-info .wrapper ul .line1 {
        display: block;
    }

    .dedicated-servers-info .wrapper ul.col25:before {
        content: "+";
        color: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background: #777;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        padding: 0 10px;
        line-height: 45px;
        border: 2px solid #fff;
        position: absolute;
        top: 10px;
        left: 140px;
    }

    .dedicated-servers-info .wrapper ul.col25:nth-of-type(2):before {
        top: -5px;
        left: 108px;
    }

    .dedicated-servers-info .wrapper ul.col25:nth-of-type(3):before {
        top: 16px;
        left: 61px;
    }

    .dedicated-servers-info .wrapper ul.col25:last-of-type:before {
        top: 0;
        left: 3px;
    }

    .dedicated-servers-info .wrapper ul.col25.active:before {
        background: #192a76;
        border: 2px solid #192a76;
    }

    .dedicated-servers-info .wrapper ul.col25 {
        cursor: pointer;
    }

}

@media only screen and (min-width: 1200px) {
    h1.product-page {
        font-size: 36px;
    }

    .wrapper ul.breakdown li {
        font-size: 1rem;
    }
}

/* -------------------------------
   CONTROL PANELS
   ------------------------------- */
.cp .fa {
    background: none;
    font-size: 22px;
    margin-right: 6px;
}

/* -------------------------------
   ICON SECTION
   ------------------------------- */
.iconsection {
    text-align: center;
}

.iconsection .wrapper {
    margin-top: -160px;
}

.iconsection .columns .col img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* -------------------------------
   FAQs
   ------------------------------- */
#main .faqs ul li:before {
    display: none;
}

#main .faqs ul li {
    cursor: pointer;
    padding: 0 12px;
    border-bottom: 1px solid #ddd;
}

#main .faqs ul li li {
    border-bottom: 0;
    padding: 8px 12px;
}

#main .faqs ul li h3 {
    cursor: pointer;
    margin: 0;
    padding: 16px 30px 16px 0;
    color: rgba(51, 51, 51, 0.3);
    transition: all 0.3s ease-in-out;
    position: relative;
}

#main .faqs ul li h3:after {
    position: absolute;
    top: 20px;
    right: 0;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    content: "+";
    font-size: 14px;
    background: #d7d7d7;
    text-align: center;
}

#main .faqs ul li h3:hover {
    color: rgba(51, 51, 51, 0.8);
}

#main .faqs ul li h3.active {
    cursor: default;
    color: rgba(51, 51, 51, 1);
}

#main .faqs ul li h3.active:after {
    background: #192a76;
    content: "-";
}

#main .faqs ul li .answer {
    display: none;
    overflow: auto;
    padding-bottom: 30px
}

#main .faqs ul li .answer.active {
    display: block
}

#main .faqs ul li p:first-of-type {
    margin-top: 0;
}

#main .faqs ul li .col img {
    margin: 0 auto;
    max-width: 100%;
}

/* -------------------------------
   VIDEOS
   ------------------------------- */
.videos {
    position: relative;
    padding-bottom: 52%; /* 16:9 */
    padding-top: 25px;
    margin: 25px 0 45px;
    height: 0;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
}

.videos iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-content {
    display: block;
    width: 100%;
}

.video-content .video {
    position: relative;
}

.video-content .video .text {
    padding: 40px;
    background: #fff;
}

@media only screen and (min-width: 1024px) {
    .video-content .video .text {
        position: absolute;
        bottom: 110px;
        left: -20px;
        padding: 50px 70px 50px 60px;
        border: 1px solid #ddd;
        box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
        z-index: 3;
        max-width: 550px;
        font-size: 0.9em
    }

    .video-content .video .text:after {
        content: "";
        width: 16px;
        height: 100%;
        height: calc(100% + 2px);
        position: absolute;
        top: -1px;
        right: -1px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b628c9+0,192a76+50,192a76+72,f2981a+100 */
        background: #b628c9; /* Old browsers */
        background: -moz-linear-gradient(-45deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b628c9', endColorstr='#f2981a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    }

    .video-content .wrapper .video .text h1 {
        margin-top: -78px;
    }
}

@media only screen and (min-width: 1600px) {
    .video-content .video .text {
        left: -112px;
    }

    .video-content .wrapper {
        padding: 100px 40px;
    }
}

/* -------------------------------
   IMAGES
   ------------------------------- */
.browser-image {
    padding-top: 30px;
    background: #f3f3f3;
    border-radius: 4px 4px 0 0;
    margin: 1px 0 50px;
    width: 87%;
    max-width: 600px;
    display: inline-block;
    position: relative;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #ddd;
    border-bottom: none;

}

.browser-image:before {
    content: "...";
    height: 6px;
    display: block;
    color: #d0d0d0;
    position: absolute;
    top: -17px;
    left: 9px;
    font-size: 60px;
}

.browser-image:before:first-of-type {
    color: #192a76;

}

.browser-image:after {
    content: "";
    width: 62%;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: 13px;
    right: 12px;
    border-radius: 10px;
    display: none;
}

.col100 > .browser-image {
    display: inline-block;
    margin: 20px auto 40px;
}

/* -------------------------------
   TABLES
   ------------------------------- */
table {
    width: 100%;
    padding: 0;
}

table td {
    border-collapse: collapse;
}

table div {
    position: relative;
}

table a.btn,
table button.buy[type="submit"] {
    display: block;
    text-indent: -9999em;
    padding: 5px;
    position: relative;
}

table a.btn.buy:after,
table button.buy[type="submit"]:after {
    position: absolute;
    top: 0;
    left: -10px;
    content: "\f291";
    display: block;
    height: auto;
    width: 100%;
    font-family: FontAwesome;
    color: #fff;
    text-align: center;
    text-indent: 0;
}

table thead th {
    color: #333;
    padding: 20px;
    font-weight: 400;
    font-size: 1em;
    line-height: 1em;
    border-right: 1px solid #ddd;
}

table thead th a.config {
    display: none;
}

table tr {
    position: relative;

}

table tr:hover td {
    background: #f8f8f8;
}

table tr td {
    padding: 10px 14px;
    width: auto;
    border: none;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
    font-size: 13px;
}

table tr th:last-of-type,
table tr td:last-of-type {
    border-right: none;
}

table tr td i.fa {
    margin: 0 5px 0 0;
    text-align: left;
}

table tr td span {
    color: #b2b7b9;
}

table tr td span span {
    display: block;
}

table tr td a {
    border-bottom: 1px dotted #999;
}

table tr td a:hover {
    color: #192a76 !important;
    border-bottom: 1px dotted #192a76;
}

table a.ghostbtn {
    text-indent: 0;
    padding: 0;
    margin: 5px;
    display: block;
}

table tr td.subheader {
    text-transform: uppercase;
    font-weight: 600;
}

table .tooltip {
    padding-right: 18px;
}

table .tooltip .tooltip-inner {
    display: none;
}

table .tooltip:after {
    content: '\f05a';
    position: absolute;
    font-family: FontAwesome;
    font-size: 1.1em;
    top: 1px;
    right: -2px;
    color: rgba(0, 0, 0, 0.18);
    display: none;
}

table .tooltip:hover:after {
    color: rgba(236, 95, 25, 1);
}

table .tooltip .tooltip-inner {
    display: none;
}

.package-table {
    margin: 0 auto;
    position: relative;
}

.package-table tr th,
.package-table tr td {
    padding: 5px;
}

.package-table tr th.section-head,
.package-table tr td.section-head {
    background: #fafafa;
    border-right: none;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.2);
    display: none !important;
}

.package-table tr th.section-head {
    border-right: 1px solid #ddd;
}

.package-table tr td.section-head {
    border-bottom: 1px solid #ddd;
}

.package-table thead:first-of-type tr td.section-head {
    border-top: 1px solid #ddd;
}

.package-table h3 {
    font-size: 0.7em;
    text-align: center;
}

.package-table thead tr th:first-of-type,
.package-table tr td:first-of-type {
    background: #F8FAFD;
}

.package-table thead tr th:last-of-type,
.package-table tr td:last-of-type {
    border-right: none;
}

.package-table tr:hover td .fa-check-circle {
    color: #2fbe49;
}

.package-table.twocol-table tr td:nth-of-type(2) {
    text-align: left;
}

.stickyheader {
    width: 100%;
    display: block;
}

.twocol-table {
    display: none !important;
}

.package-table.stickytable {
    margin-top: 100px;
}

.stickyheader.stickytable {
    position: fixed;
    top: 0;
    margin-left: -20px;
    width: 100%;
    max-width: 1200px;
    padding: 0 0 0 20px;
    z-index: 1;
    box-shadow: 0 9px 17px -17px rgba(0, 0, 0, 0.30);
}

.stickyheader.twocol-table.stickytable {
    max-width: 980px !important;
}

.stickyheader.stickytable .package-table {
    background: #fff;
    margin: 0;
}

.stickyheader.stickytable .package-table th {
    display: inline-block;
    width: 25%;
}

/*------------------------------
.large-table used for styling tables of 6 columns or more e.g. Office 365
-------------------------------*/
.stickyheader .large-table {
    display: none;
}

.large-table th,
.large-table td {
    width: 16.666666% !important;
    padding: 5px !important;
    display: none;
}

.large-table tr td:first-of-type {
    display: block;
}

.large-table th h3 {
    font-size: 1.24em;
    line-height: 1.3em;
}

table .mobiledesc {
    background: #fff;
    display: block;
    margin: 10px -5px -5px;
    opacity: 0.7;
    padding: 10px;
}

.ssl-table-mobile {
    display: none;
}

/*SSL TABLE*/
@media only screen and (max-width: 1024px) {
    .large-table.ssl-table {
        display: none;
    }

    .ssl-table-mobile {
        display: block;
    }
}

@media only screen and (min-width: 1026px) {
    table .tooltip:after {
        display: block;
    }

    table .tooltip .tooltip-inner {
        display: block;
    }

    table .mobiledesc {
        display: none;
    }

    table a.btn.buy,
    table button.buy[type="submit"] {
        display: block;
        text-indent: 0;
        padding: 0 10px;
    }

    table a.btn.buy:after,
    table button.buy[type="submit"]:after {
        content: "";

    }

    table tr th,
    table tr td {
        text-align: right;
    }

    table thead th a.config {
        display: inline-block;
    }

    .package-table h3 {
        font-size: 1.6em;
        text-align: right;
    }

    .package-table tr th.section-head,
    .package-table tr td.section-head {
        display: table-cell !important;
    }

    .package-table tr th,
    .package-table tr td {
        text-align: right;
        width: 20%;
        padding: 10px 20px;
    }

    .package-table td .fa {
        text-align: right;
        color: rgba(0, 0, 0, 0.15);
        font-size: 1.2em;
        display: inline;
    }

    .package-table tr:hover td .fa-check-circle {
        text-align: right;
    }

    .package-table.stickytable {
        margin-top: 190px;
    }

    .twocol-table {
        display: block !important;
    }

    .stickyheader.stickytable {
        top: 48px;
        margin-left: -40px;
        padding: 0 40px;
    }

    .stickyheader.stickytable .package-table th {
        display: table-cell;
        width: 20%;
    }

    /*------------------------------
    .large-table used for styling tables of 6 columns or more e.g. Office 365
    -------------------------------*/
    .stickyheader .large-table {
        display: table
    }

    .large-table tr th,
    .large-table tr td,
    .large-table tr td:first-of-type {
        width: 14.28% !important;
        padding: 10px !important;
        display: table-cell;
    }
}

@media (max-width: 1024px) {
    .package-table thead {
    }

    .package-table tbody tr:nth-child(2n+1) {
        background: rgba(0, 0, 0, 0.02);
    }

    .package-table tr {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

    .stickyheader .package-table th,
    .package-table tr td {
        flex: 1 1 25%;
        text-align: left;
    }

    .package-table tr td:first-child {
        flex: 4 1 100%;
        text-align: left;
        border-right: none;
        background: rgba(0, 0, 0, 0.05);
        color: #787878;
    }
}

table input[type="text"],
table input[type="email"],
table textarea,
table select {
    min-width: 120px !important;

}

/* -------------------------------
   TABLE SIDE LIST
   ------------------------------- */
.sidelist h3,
.sidelist h4 {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #ddd;
}

.sidelist h4 {
    margin: 14px 0 -4px;
}

.sidelist h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.sidelist p {
    color: #787878;
    font-size: 14px;
    line-height: 1.6em;
}

.sidelist ol {
    padding: 0;
    margin: 14px 0 0 14px;
}

.sidelist ol li {
    color: #192a76;
    font-size: 14px;
    line-height: 1.6em;
}

.sidelist ol li span {
    color: #787878;
}

.sidelist .fa {
    color: #192a76;
    margin-right: 6px;
}

/* -------------------------------
   TERMS & CONDITIONS
   ------------------------------- */
.terms-note {
    padding: 10px 0;
    margin: 40px 0
}

.terms-note h3,
.terms-note h4 {
    color: #484848;
    margin: 2px 0 10px !important;
}

.terms-note ul {
    padding: 16px;
    margin: 0;
}

.terms-note p,
.terms-note li {
    font-size: 0.8em;
    line-height: 1.6em;
    color: #484848;
    opacity: 1;
}

.terms-note a {
    display: inline;
}

/* --------- terms and conditions page styles ---------*/
#terms-start h3 {
    text-transform: uppercase;
}

#terms-start h3:after {
    content: "";
    height: 3px;
    margin-top: 6px;
    width: 100%;
    background: #192a76;
    display: block;
}

#terms-start h4 {
    display: inline-block;
    text-transform: uppercase;
    color: #192a76;
    margin-bottom: 6px;
}

#terms-start h5 {
    display: block;
    text-transform: uppercase;
    color: #2f2f2f;
    font-size: 1em;
    margin: 0 0 -9px 0;
}

#terms-start ol {
    counter-reset: item;
}

#terms-start ol > li {
    counter-increment: item;
}

#terms-start ol ol > li {
    display: block;
}

#terms-start ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

/* -------------------------------
   MORE INFO / CALL US BANNER
   ------------------------------- */
.moreinfo {
    background: #192a76;
    transform: skewY(-5deg);
    position: relative;
    z-index: 4;
    margin-top: -140px;
}

.moreinfo .wrapper {
    transform: skewY(5deg);
    padding: 48px 0 140px;
}

.moreinfo h3 {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.06em;
    line-height: 1.8em;
    margin: 0;
}

.moreinfo h3 strong {
    color: rgba(255, 255, 255, 1);
    padding-right: 20px;
    margin-bottom: 20px;
    display: block;
}

.moreinfo .person {
    display: none;
}

.moreinfo .bigtext {
    font-size: 2em;
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    color: rgba(255, 255, 255, 1);
    display: block;
}

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

    .moreinfo .person {
        display: inline-block;
        float: left;
        width: 300px;
        height: 260px;
        background: url("../images/structure/moreinfo_callus.jpg") no-repeat;
    }

    .moreinfo h3 {
        padding: 40px 20px;
    }

    .moreinfo h3 strong {
        display: inline;
        margin-bottom: 0;
    }

    .moreinfo .bigtext {
        display: inline-block;
    }

}

/* -------------------------------
   GTLDs RANDOM BLOCK COLOUR
   ------------------------------- */
/* random colours to domain extensions */
.random-colour {
    padding: 30px 0 30px 18px;
    min-height: 400px;
    max-height: 400px;
    overflow: hidden;
    margin-bottom: 00px;
    transition: 1s max-height;
    border-bottom: 1px solid #fff;
}

.showmore {
    border: 1px solid #ccc;
    border-radius: 0 0 2px 2px;
    padding: 16px;
    margin: 0 auto 30px;
    width: 300px;
    text-align: center;
    background: #eee;
    color: #333;
    cursor: pointer;
}

.showmore:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
}

.random-colour.active {
    max-height: 4000px;
}

.random-colour .col10 {
    background: #D780CE;
    padding: 10px;
    margin: 5px;
    font-size: 14px;
    text-align: center;
    width: 49%;
    width: calc(50% - 10px);
    border-radius: 2px;
    color: #fff;
}

.random-colour .col10:nth-child(2n+1) {
    background: #ECA36E;
}

.random-colour .col10:nth-child(3n+1) {
    background: #eac945;
}

.random-colour .col10:nth-child(4n+1) {
    background: #4597C2;
}

.random-colour .col10:nth-child(5n+1) {
    background: #8E85CB;
}

.random-colour .col10:nth-child(6n+1) {
    background: #ECA36E;
}

.random-colour .col10:nth-child(7n+1) {
    background: #D17066;
}

.random-colour .col10:nth-child(8n+1) {
    background: #B1B65E;
}

.random-colour .col10:nth-child(9n+1) {
    background: #86CAA5;
}

.random-colour .col10:nth-child(11n+1) {
    background: #86C9CA;
}

.random-colour .col10:nth-child(12n+1) {
    background: #41B3D5;
}

.random-colour .col10:nth-child(13n+1) {
    background: #192a76;
}

.random-colour .col10:nth-child(15n+1) {
    background: #5FCF80;
}

.random-colour .col10:nth-child(16n+1) {
    background: #dd4b39;
}

@media only screen and (min-width: 480px) {
    .random-colour .col10 {
        width: 31%;
        width: calc(33.3% - 10px)
    }
}

@media only screen and (min-width: 1024px) {
    .random-colour .col10 {
        width: 10%;
    }
}

/* -------------------------------
   ABOUT US TIMELINE
   ------------------------------- */
.timeline {
    width: 100%;
    max-width: 1800px;
    overflow: hidden;
    margin: -60px auto 0;
    padding: 30px 10px;
    position: relative;
}

.timeline .col20 {
    text-align: center;
    position: relative;
    width: 100%;
}

.timeline .col20 span {
    border-radius: 50%;
    height: 130px;
    width: 130px;
    display: block;
    background: #486f6a;
    position: relative;
    margin: 20px auto 100px;
    z-index: 3;
    transition: ease-in-out 0.5s;
    cursor: pointer;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.21);
}

.timeline .col20 span:hover {
    box-shadow: 7px 7px 10px 0 rgba(0, 0, 0, 0.11);
}

.timeline:before {
    content: "";
    height: 100%;
    width: 2px;
    position: absolute;
    background: #ccc;
    top: 0;
    left: 50%;
    z-index: 2;
}

.timeline .col20:nth-of-type(2) span {
    background: #0086ED;
}

.timeline .col20:nth-of-type(3) span {
    background: none;
    border: 2px solid #192a76;
    height: 130px;
    width: 130px;
}

.timeline .col20:nth-of-type(4) span {
    background: #5888ad;
}

.timeline .col20:nth-of-type(5) span {
    background: #6ec9bd;
}

.timeline .col20 span img {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -65px;
}

.timeline .col20 p {
    display: block;
    background: #333;
    color: #fff;
    padding: 14px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    position: absolute;
    width: 200px;
    top: 130px;
    left: 50%;
    margin-left: -100px;
    line-height: 1.4em;
    z-index: 20;
    transition: ease-in-out 0.2s;
    box-shadow: 7px 7px 10px 0 rgba(0, 0, 0, 0.11);
}

.timeline .col20 p:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(51, 51, 51, 0);
    border-bottom-color: #333;
    border-width: 10px;
    margin-left: -10px;
}

.timeline div p.slideUp {
    opacity: 1;
}

.timeline .col20 span.hexagon {
    position: relative;
    width: 180px;
    height: 103.92px;
    background-color: #192a76;
    margin: 34px auto 130px;
    z-index: 3;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.timeline .col20 span.hexagon:before,
.timeline .col20 span.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    left: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

.timeline .col20 span.hexagon:before {
    bottom: 100%;
    border-bottom: 51.96px solid #192a76;
}

.timeline .col20 span.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 51.96px solid #192a76;
}

.timeline .col20 span.hexagon img {
    bottom: -6px;
}

@media only screen and (min-width: 840px) {
    .timeline {
        width: 100%;
        max-width: 1800px;
        overflow: hidden;
        margin: -80px auto 0;
        padding: 56px 0 70px;
    }

    .timeline:before {
        background: #ccc;
        height: 8px;
        width: 100%;
        position: absolute;
        display: block;
        top: 140px;
        left: 0;
        border-radius: 5px;
    }

    .timeline .col20 {
        width: 20%;
    }

    .timeline .col20 span {
        margin: 20px auto;
    }

    .timeline .col20:first-of-type span:before,
    .timeline .col20:last-of-type span:before {
        content: "1997";
        height: 30px;
        width: 100%;
        position: absolute;
        color: #dddedf;
        top: -80px;
        left: 0;
        text-align: center;
        display: block;
        background: none;
        font-size: 20px;
        font-weight: 700;
    }

    .timeline .col20:last-of-type span:before {
        content: "TODAY";
    }

    .timeline .col20:last-of-type span:after {
        display: none;
    }

    .timeline .col20 p {
        visibility: hidden;
        opacity: 0;
    }

    .timeline .col20 span {
        transform: translatex(2000px);
        animation: come-in 0.8s ease forwards;
    }

    .timeline .col20:first-of-type span {
        animation-duration: 0.6s; /* So they look staggered */
    }

    .timeline .col20:nth-of-type(2) span {
        animation-delay: 0.5s;
        animation-duration: 0.6s; /* So they look staggered */
    }

    .timeline .col20:nth-of-type(3) span {
        animation-delay: 1s;
        animation-duration: 0.6s; /* So they look staggered */
    }

    .timeline .col20:nth-of-type(4) span {
        animation-delay: 1.5s;
        animation-duration: 0.6s; /* So they look staggered */
    }

    .timeline .col20:last-of-type span {
        animation-delay: 2s;
        animation-duration: 0.6s; /* So they look staggered */
    }

    @keyframes come-in {
        to {
            transform: translateX(0);
        }
    }
    .timeline:before {
        transform: scaleX(0);
        animation: come-in 0.8s ease forwards;
    }

    .timeline .col20 span.hexagon {
        margin: 34px auto;
    }
}

@media only screen and (min-width: 1400px) {
    .timeline {
        width: 100%;
        max-width: 1800px;
        overflow: hidden;
        margin: -80px auto 0;
        padding: 56px 200px 80px;
    }
}

/* -------------------------------
   DATA CENTRE (DC) MAP
   ------------------------------- */
.map .col {
    padding: 0 20px;
}

.map ol {
    margin: 0;
    padding-left: 10px;
}

.map ol li {
    color: #ec5f15;
    font-size: 13px;
    padding: 3px 0;
}

.map ol li span {
    color: #333;
}

.map .themap {
    display: none;
    background: url("../images/structure/dcmap/map.svg") 0 0 no-repeat;
    background-size: 92% auto;
    min-height: 540px;
    padding-top: 0;
    overflow: visible;
    position: relative;
}

.map .themap .icon,
.map .themap a.icon {
    width: 20px;
    height: 29px;
    background: url("../images/structure/icon-sheet.png") -14px 1px;
    position: absolute;
    display: block;
    cursor: pointer;
    color: #999;
}

.map .themap .icon-glasgow {
    top: 127px;
    left: 130px
}

.map .themap .icon-stasaph {
    top: 255px;
    left: 157px
}

.map .themap .icon-manchester {
    top: 248px;
    left: 185px
}

.map .themap .icon-manchester2 {
    top: 244px;
    left: 196px
}

.map .themap .icon-nottinghan {
    top: 280px;
    left: 250px;
}

.map .themap .icon-leicester {
    top: 305px;
    left: 260px;
}

.map .themap .icon-london {
    top: 352px;
    left: 282px;
}

.map .themap .icon-maidenhead {
    top: 360px;
    left: 262px
}

.map .themap .icon-gosport {
    top: 403px;
    left: 210px
}

.map .themap .icon .info {
    display: none;
    background: #fff;
    padding: 16px;
    box-shadow: 7px 7px 10px 0 rgba(0, 0, 0, 0.11);
    position: absolute;
    top: -180px;
    left: -110px;
    width: 240px;
    text-align: center;
    transition: all 0.5s ease-in-out;
}

.map .themap .icon .info:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 10px;
    margin-left: -10px;
}

.map .themap .icon-guide {
    background: none;
    top: auto;
    bottom: 0;
    left: 110px;
    width: 100%;
    color: #999;
    font-size: 12px;
    padding-left: 28px;
}

.map .themap .icon-guide span {
    width: 20px;
    height: 29px;
    background: url("../images/structure/icon-sheet.png") -14px 1px;
    position: absolute;
    display: block;
    left: 0;
    cursor: pointer;
    color: #999;
}

@media only screen and (min-width: 1024px) {
    .map .col {
        padding-top: 140px;
    }

    .map .themap {
        display: block;
    }
}

/* -------------------------------
   CUSTOMER REVIEWS
   ------------------------------- */
.customer-reviews {
}

.customer-reviews .col33 .col100 {
    background: rgba(0, 0, 0, 0.02);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.customer-reviews .col33 .col100 h3 {
    font-size: 1em;
}

.customer-reviews .col33 .col100 .rating {
    display: block;
}

.customer-reviews .col33 .col100 .rating .fa {
    color: #192a76;
    margin-right: 2px;
}

.customer-reviews .col33 .col100 .rating .month {
    float: right;
    color: rgba(0, 0, 0, 0.4);
}

.customer-reviews .col33 .col100 .rating .month:before {
    content: '\f133';
    font-family: FontAwesome;
    padding-right: 7px;
    font-size: 0.9em;
}

.customer-reviews .col33 .col100 p.customer {
    border-top: 2px solid #192a76;
    margin-top: 20px;
    padding-top: 4px;
    font-size: 0.75em;
}

.customer-reviews .col33 .col100 p:last-of-type {
    margin-bottom: 0;
}

/* -------------------------------
   ACCREDITATION PAGE & FOOTER LOGOS
   ------------------------------- */
.accreditation-page a.col30 {
    padding-top: 18px;
}

.accreditation-page a.col > img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-top: -80px;
    background: rgba(0, 0, 0, 0.04);
}

.accreditation-page a.col:hover > img {
    background: rgba(0, 0, 0, 0.04);
}

.accreditation-page a.col > div {
    text-align: center;
    background: rgba(0, 0, 0, 0.08);
    padding: 4px;
}

.accreditation-page a.domain-link {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b628c9+0,192a76+50,192a76+72,f2981a+100 */
    background: #b628c9; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #b628c9 0%, #192a76 50%, #192a76 72%, #f2981a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b628c9', endColorstr='#f2981a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    padding: 7px 14px;
    display: block;
    width: 100%;
    color: #fff !important;
}

.accreditation-page a.domain-link:before {
    content: "\f0ac";
    font-family: FontAwesome;
    color: rgba(255, 255, 255, 0.4);
    padding-right: 10px;
}

.accreditations {
    background: #fff;
    margin-bottom: -1px;
    margin-top: -116px;
    position: relative;
    z-index: 4;
}

.accreditations:after {
    clear: both;
    display: table;
    content: "";
}

.accreditations div {
    display: inline-block;
    float: left;
    border: 1px solid #e0e0e0;
    border-top: 0;
    border-left: 0;
    width: 50%;
}

.accreditations div img {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 300px;
    display: block;
}

.accreditations div:nth-child(2n) {
    border-right: 0;
}

@media only screen and (min-width: 768px) {
    .accreditation-page a.col > img {
        margin-top: 0;
        background: none;
    }

    .accreditations div {
        width: 10%;
    }

    .accreditations div:nth-child(2n) {
        border-right: 1px solid #e0e0e0;
    }

    .accreditations div:nth-child(10n) {
        border-right: 0;
    }
}

/* -------------------------------
   FORMS
   ------------------------------- */
#main form p {
    opacity: 1;
}

#main input[type="text"],
#main input[type="email"],
#main input[type="password"],
#main textarea,
#main select {
    background: rgba(248, 250, 253, 1);
    border-radius: 2px;
    line-height: 40px;
    height: 40px;
    min-width: 260px;
    padding: 5px 14px;
    margin: 0 0 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #333;
}

#main textarea {
    height: 100px;
}

#main .content-form .btn.back {
    background: rgba(0, 0, 0, 0.019);
    color: #999 !important;
    transition: all ease-in-out 0.1s;
    text-align: center;
}

#main .content-form .btn.back:hover {
    background: rgba(0, 0, 0, 0.16);
    color: #fff !important;
}

#main form.contact p label {
    font-size: 13px;
    text-transform: uppercase;
    color: #333;
    font-weight: 600;
    display: block;
}

button[type="submit"]:enabled {
    cursor: pointer;
}

form label.error {
    display: none;
}

form label.error-block {
    display: block;
}

@media only screen and (min-width: 768px) {
    #main .content-form .btn.back {
        max-width: 200px;
    }

    #main form .name {
        width: 48%;
        float: left;
        margin-top: -10px;
    }

    #main form .name:nth-of-type(2) {
        float: right;
        margin-right: 0;
    }

    .wizard-link.btn {
        max-width: 240px;
    }
}

/* -------------------------------
    ABOUT US INCLUDE
    ------------------------------- */
.aboutus {
    overflow: hidden;
    background: #FCFDFF;
}

.aboutus .wrapper {
    padding: 0 20px;
}

.aboutus .col {
    padding: 80px 0;
}

.aboutus .col h1 {
    margin-bottom: 0;
    padding-bottom: 30px !important;
}

.aboutus .image-col {
    padding: 0;

}

.aboutus .image-col img {
    width: 128%;
    height: auto;
    max-width: none;
    margin: -50px 0 -700px 0;
    opacity: 0.24;
}

@media only screen and (min-width: 1024px) {
    .aboutus .image-col img {
        opacity: 1;
        margin: -50px 0 -500px -155px;
    }
}

/* -------------------------------
    SECRET PAGE
    ------------------------------- */
#secret_voucher {
    background: url(../images/content/secret/discount-bg.png) no-repeat;
    height: 70px;
    width: 70%;
    font-size: 40px;
    text-align: center;
    border: 3px solid #525252;
    line-height: 70px;
    margin: 20px auto;
    font-family: 'Open Sans';
    font-weight: 700;
}

#secret_voucher span {
    color: #f77104;
}

/* -------------------------------
    NEWSLETTER INCLUDE
    ------------------------------- */
.newsletter-include {
    overflow: visible;
    position: relative;
    background: #b628c9; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #b628c9 0%, #192a76 30%, #192a76 67%, #f2981a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b628c9', endColorstr='#f2981a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

.newsletter-include:after {
    content: "";
    background-image: url("../images/content/backgrounds/newsletter-background.png");
    width: 1882px;
    height: 317px;
    position: absolute;
    display: block;
    top: -36px;
    left: 50%;
    margin-left: -941px;
    z-index: 2;
}

.newsletter-include .wrapper {
    position: relative;
    z-index: 3;
}

.newsletter-include h1 {
    color: #fff;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.newsletter-include h1 span {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-include form {
    position: relative;
}

.newsletter-include input[type="email"] {
    background: #fff !important;
    float: left !important;
    width: 70% !important;
    width: calc(100% - 120px) !important;
    min-width: 204px !important;
    margin: 0 !important;
    height: 60px !important;
    line-height: 50px !important;
}

.newsletter-include input[type="submit"] {
    float: right !important;
    max-width: 116px !important;
    margin: 0 !important;
    height: 60px;
    line-height: 60px;
}

/* -------------------------------
    OFFICE PRODUCT STYLES
    ------------------------------- */
.officeproducts .col20 {
    background: url("../images/content/office/office-apps-large.png") no-repeat;
    background-size: cover;
    display: block;
    height: 106px;
    margin-top: 24px;
    max-width: 106px;
}

.officeproducts .col20.excel {
    background-position: 0 -232px;
}

.officeproducts .col20.outlook {
    background-position: 0 -411px;
}

.officeproducts .col20.word {
    background-position: 0 -607px;
}

.officeproducts .col20.powerpoint {
    background-position: 0 -771px;
}

.officeproducts .col20.onenote {
    background-position: 0 -944px;
}

.officeproducts .col20.publisher {
    background-position: 0 -1115px;
}

/* -------------------------------
   MODAL POPUP BOX
   ------------------------------- */
.showmodal {
    cursor: pointer;

}

.wickedpicker__controls .hide_mins {
    display: none !important;
}

.modalcontent {
    display: none;
}

.modal_overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999998;
}

.modal_pop {
    display: none;
    background: #fff;
    position: fixed;
    top: 50%;
    z-index: 999999;
    width: 100%;
    max-width: 920px;
    height: auto;
    max-height: 770px;
    left: 50%;
    transform: translate(-50%, -49.9%);
    box-shadow: 7px 7px 10px 0 rgba(0, 0, 0, 0.2);
}

.modal_pop.small {
    max-height: 400px;
    max-width: 600px;
}

.modal_pop .modal-head {
    background: #192a76;
    width: 100%;
    display: block;
    height: 0;
}

.modal_pop .modal-content {
    padding: 20px 20px 120px;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.modal_pop .modal-content .spinner {
    display: none;
    background: url(../images/structure/easyspace-spinner.gif);
    background-size: contain;
    width: 60px;
    height: 60px;
    position: fixed;
    top: 43%;
    left: 70%;
    margin-left: -40px;
    z-index: 199;
}

.modal_pop .modal-content h1 {
    font-size: 1.9rem;
}

.modal_pop .modal-content form p {
    margin: 0 0 4px 0;
}

.modal-content button {
    width: 100%;
    min-width: 100%;
}

.modal_pop .tooltip {
    position: relative;
}

.modal_pop .modal-content:after {
    content: "";
    display: table;
    clear: both;
}

.modal_pop .modal-content .fa-spinner {
    color: #192a76;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.modal_pop img {
    width: 100%;
}

.modal_pop .fa-close {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 16px;
    color: rgba(0, 0, 0, 0.1);
    font-size: 27px;
    z-index: 2;
}

.modal_pop .fa-close:hover {
    color: rgba(0, 0, 0, 0.22);

}

.modal_pop iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.modal_pop .modal-content .col-head {
    border-bottom: 1px solid #ddd;
}

.modal_pop .modal-content .col-head img {
    max-width: 240px;
    margin: -20px auto 0;
    display: block;
}

@media (max-width: 1024px) {
    .modal_overlay {
        width: 100%;
    }

    .modal_pop {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        transform: none;
        max-width: 100%;
        max-height: none;
        overflow: scroll;
    }

    .modal_pop .modal-content h1 {
        font-size: 1.2rem;
    }

    .modal-content {
        position: fixed;
        background: #fff;
    }

    .modal-head {
        position: fixed;
    }

    .modal_pop form .btn {
        z-index: 2;
    }
}

.modal_pop h3 {
    display: block;
    text-transform: uppercase;
    color: #333;
    padding-bottom: 6px;
    margin-bottom: 20px;
    border-bottom: 2px solid #192a76;
    opacity: 1;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

.modal_pop h3 .fa {
    color: #192a76;
}

.modal_pop form .col50 {
    padding: 0;
}

.modal_pop form p {
    width: 100%;
    display: block;
    opacity: 1;
}

.modal_pop form p:after {
    content: "";
    clear: both;
    display: table;
}

.modal_pop form label {
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85em;
    color: 333;
}

.modal_pop form label span {
    color: #aaa;
}

.modal_pop form label span:before {
    content: '(';
}

.modal_pop form label span:after {
    content: ')';
}

.modal_pop form input[type="text"],
.modal_pop form input[type="email"],
.modal_pop form input[type="password"],
.modal_pop form select,
.modal_pop form textarea {
    line-height: 30px;
    margin: 0 0 10px;
    background: #fff;
    padding: 5px 14px;
    color: #6f6f6f;
    font-size: 14px;
    position: relative;
    outline: none;
    width: 95%;
    width: calc(100% - 10px);

    background: rgba(248, 250, 253, 1);
    border-radius: 2px;
    line-height: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #333;
}

.modal_pop form textarea {
    height: 70px;
    line-height: 22px;
}

.modal_pop form p.name input[type="text"] {
    width: 95%;
    width: calc(100% - 10px);
}

.modal_pop form input[type="text"]:active,
.modal_pop form input[type="text"]:focus,
.modal_pop form input[type="email"]:active,
.modal_pop form input[type="email"]:focus,
.modal_pop form input[type="password"]:active,
.modal_pop form input[type="password"]:focus,
.modal_pop form select:active,
.modal_pop form select:focus {
    background: rgba(75, 181, 219, 0.16);
    border: 2px solid rgba(75, 181, 219, 1);
}

.modal_pop form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #ccc 50%),
    linear-gradient(135deg, #ccc 50%, transparent 50%),
    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-position: calc(100% - 20px) calc(1em + 3px),
    calc(100% - 15px) calc(1em + 3px),
    100% 0;
    background-size: 5px 5px,
    5px 5px,
    3.2em 3.5em;
    background-repeat: no-repeat;
    line-height: 30px;
}

.modal_pop form select:focus {
    background-image: linear-gradient(45deg, rgba(75, 181, 219, 1) 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, rgba(75, 181, 219, 1) 50%),
    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-position: calc(100% - 15px) calc(1em + 3px),
    calc(100% - 20px) calc(1em + 3px),
    100% 0;
    background-size: 5px 5px,
    5px 5px,
    3.2em 3.5em;
    background-repeat: no-repeat;
}

.modal_pop form .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 5px 20px;
    height: 68px;
    margin: 0;
}

.modal_pop form .btn:hover:after {
    content: "Submit";
    font-family: "Open Sans";
    font-size: 20px;
}

.modal_pop form .g-recaptcha > div {
    margin: 0 auto;
}

.modal_pop .callmeback {
    display: none;
}

.modal_pop .callmeback.checked {
    display: block
}

.modal_pop .termsbox {
    border: 1px solid #e5e5e5;
    height: 80px;
    overflow: auto;
    padding: 12px;
    font-size: 0.8em;
    border-radius: 2px;
    line-height: 1.5em;
    overflow-y: scroll;
}

.modal_pop .modal-content .btn:disabled,
.modal_pop .modal-content .btn[disabled] {
    background: #8c928d;
    box-shadow: none;
}

.modal_pop .modal-content .formtext {
    display: none;
}

.modal_pop .modal-content svg {
    width: 100px;
    display: block;
    margin: 40px auto 0;
}

.modal_pop .modal-content .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.modal_pop .modal-content .circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
}

.modal_pop .modal-content .check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
}

.modal_pop .modal-content h2 {
    text-align: center;
    padding-bottom: 20px;
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}

@media (min-width: 1024px) {

    .modal_pop {
        border-radius: 6px;
        overflow: hidden;
    }

    .modal_pop:after {
        content: "";
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b628c9+0,192a76+50,192a76+72,f2981a+100 */

        color: #fff;
        overflow: hidden;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 37.1%;
        height: 100%;
        height: calc(100% + 1px);
        z-index: 1;
        border-radius: 6px 0 0 6px;
    }

    .modal_pop .modal-content {
        padding: 40px 0px 40px;
        overflow: hidden;
        max-height: 770px;
        position: relative;
        z-index: 2;
    }

    .modal_pop .modal-content .formtext {
        display: inline-block;
    }

    .modal_pop .modal-content .formtext h3 .fa,
    .modal_pop .modal-content .formtext h3,
    .modal_pop .modal-content .formtext p {
        color: #fff
    }

    .modal_pop .modal-content .formtext h3 .fa {
        display: block;
        font-size: 1.6em;
        margin-bottom: 12px;
    }

    .modal_pop .modal-content .formtext h3 {
        border-color: #fff;
        margin-top: 0;
    }

    .modal_pop form .btn {
        position: static;
        width: 100%;
        border-radius: 0;
        height: 60px;
        margin: 0;
    }

    .modal_pop form .btn:after {
        content: "\f003";
        font-size: 30px;
        font-family: FontAwesome;
    }

    .modal_pop form p.name {
        width: 50%;
        float: left;
    }

    .modal_pop form button {
        position: absolute;
    }

    @media screen and ( max-height: 770px ) and (min-width: 1024px) {
        .modal_pop .modal-content {
            overflow-y: scroll;
            max-height: 500px;
        }
    }

    /*------------------------------------------------------------------------------
    Time Select popup in modal
    -------------------------------------------------------------------------------*/
    .wickedpicker {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        box-shadow: 0 0 0 1px rgba(14, 41, 57, 0.12), 0 2px 5px rgba(14, 41, 57, 0.44), inset 0 -1px 2px rgba(14, 41, 57, 0.15);
        background: #fefefe;
        margin: 14px auto 0;
        border-radius: 0.1px;
        width: 270px;
        height: 146px;
        font-size: 14px;
        display: none;
        z-index: 999999999999999;
    }

    .wickedpicker__title {
        position: relative;
        background: #192a76;
        margin: 0 auto;
        border-bottom: 1px solid #e5e5e5;
        padding: 12px 11px 10px 15px;
        color: #fff;
        font-size: inherit;
        opacity: 1;
    }

    .wickedpicker__title:after,
    .wickedpicker__title:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .wickedpicker__title:after {
        border-color: rgba(236, 95, 25, 0);
        border-bottom-color: #192a76;
        border-width: 8px;
        margin-left: -8px;
    }

    .wickedpicker__title:before {
        border-color: rgba(229, 229, 229, 0);
        border-bottom-color: #e5e5e5;
        border-width: 9px;
        margin-left: -9px;
    }

    .wickedpicker__close {
        -webkit-transform: translateY(-25%);
        -moz-transform: translateY(-25%);
        -ms-transform: translateY(-25%);
        -o-transform: translateY(-25%);
        transform: translateY(-25%);
        position: absolute;
        top: 25%;
        right: 10px;
        color: #fff;
        cursor: pointer;
    }

    .wickedpicker__close:before {
        content: '\00d7';
    }

    .wickedpicker__controls {
        padding: 10px 0;
        line-height: normal;
        margin: 0;
    }

    .wickedpicker__controls__control,
    .wickedpicker__controls__control--separator {
        vertical-align: middle;
        display: inline-block;
        font-size: inherit;
        margin: 0 auto;
        width: 35px;
        letter-spacing: 1.3px;
    }

    .wickedpicker__controls__control-up,
    .wickedpicker__controls__control-down {
        color: #34495e;
        position: relative;
        display: block;
        margin: 3px auto;
        font-size: 18px;
        cursor: pointer;
        opacity: 1;
        z-index: 20;
    }

    .wickedpicker__controls__control-up:hover,
    .wickedpicker__controls__control-down:hover {
        opacity: 1;
    }

    .wickedpicker__controls__control-up:before {
        content: '\f077';
    }

    .wickedpicker__controls__control-down:after {
        content: '\f078';
    }

    .wickedpicker__controls__control--separator {
        width: 5px;
    }

    .text-center, .wickedpicker__title, .wickedpicker__controls, .wickedpicker__controls__control, .wickedpicker__controls__control--separator, .wickedpicker__controls__control-up, .wickedpicker__controls__control-down {
        text-align: center;
    }

    .hover-state {
        color: #3498db;
    }

    .wickedpicker__controls__control-up:before,
    .wickedpicker__controls__control-down:after {
        font-family: 'FontAwesome', sans-serif;
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        margin-right: .2em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-left: .2em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* -------------------------------
       WHOIS SEARCH & PAGE SPECIFICS
       ------------------------------- */
    .whoisform {
        padding: 22px 40px 40px;
        background: rgba(0, 0, 0, 0.04);
        margin-top: 20px;
        display: block;
    }

    .whoisform input[type="text"] {
        width: 100%;
        display: inline-block;
    }

    .whoisform .g-recaptcha > div > div {
        width: 100% !important;
    }

    .whoisred,
    .whoisgreen {
        background: #FCFDFF;
        box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05);
        padding-bottom: 10px;
    }

    .whoisred p,
    .whoisred ul,
    .whoisgreen p,
    .whoisgreen ul {
        padding: 0 30px !important;
    }

    .whoisred h4,
    .whoisgreen h4 {
        color: #fff;
        padding: 20px;
        background-color: #d83f43;
    }

    .whoisred h4:before,
    .whoisgreen h4:before {
        content: '\f13e';
        font-family: FontAwesome, sans-serif;
        color: #fff;
        padding-right: 10px;
    }

    .whoisgreen h4:before {
        content: '\f023';
    }

    .whoisgreen h4 {
        background-color: #00A53C;
    }
}

/* -------------------------------
SITEMAP PAGE
------------------------------- */
.sitemap-page h3 {
    border-bottom: 3px solid #333;
    padding-bottom: 6px;
}

/* -------------------------------
   FOOTER
   ------------------------------- */
footer {
    background: #f1f1f1;
    border-top: 1px solid #e7e7e7;
    position: relative;
    z-index: 4;
}

footer section:after {
    display: table;
    clear: both;
    content: "";
}

footer .sitemap {
    display: flex;
    flex-wrap: wrap;
}

footer .sitemap div {
    padding: 0 10px;
    width: 100%;
    display: none;
}

footer h3 {
    text-transform: capitalize;
    color: #787878;
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 5px;
}

footer .sitemap div ul {
    list-style: none;
    padding: 0;
}

footer .sitemap div ul li {
    padding: 0 0 0 16px;
    position: relative;
    font-size: 14px;
}

footer .sitemap div ul li:before {
    background: rgba(0, 0, 0, 0) url("../images/structure/icon-sheet.png") no-repeat scroll 0 0;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 9px;
    width: 5px;
}

footer .sitemap div ul li,
footer .sitemap div ul li a {
    text-decoration: none;
    color: #b2b7b9;
}

footer .sitemap div ul li a:hover {
    text-decoration: underline;
    color: #333;
}

.footer-last {
    padding: 10px 0;
    background: #fff;
    border-top: 1px solid #e7e7e7;
    margin-bottom: 80px;
}

.footer-last .currencyChoice select {
    border: 0;
    color: #f1a37d;
}

.footer-last .currencyChoice select:hover {
    cursor: pointer;
    color: #192a76;
}

@media only screen and (min-width: 768px) {
    .footer-last {
        padding: 40px;
    }

    footer .sitemap div {
        float: left;
        width: 33.3%;
        display: block;
    }
}

@media only screen and (min-width: 1024px) {
    footer .sitemap div {
        float: left;
        width: 20%;
        display: block;
    }

    footer .sitemap div ul {
        margin: 0 0 20px 0;
        min-height: 130px
    }
}

/* -------------------------------
   FOOTER NEWSLETTER & SOCIAL
   ------------------------------- */
footer .newsletter,
footer .social {
    display: block;
    padding: 20px 0 0;
    text-align: center;
}

footer .newsletter h3,
footer .social h3 {
    padding-bottom: 14px;
}

footer .newsletter input[type="email"] {
    background: #dcdcdc;
    color: #999;
    border: none;
    border-radius: 2px;
    height: 35px;
    line-height: 31px;
    padding: 2px 14px;
    width: 90%;
    width: calc(100% - 110px);
    max-width: 650px;
}

footer .newsletter input[type="submit"] {
    background: #192a76;
    color: #fff;
    border: none;
    border-radius: 2px;
    height: 35px;
    line-height: 31px;
    padding: 2px 14px;
    width: 100px;
}

footer .social i {
    color: #fff;
    line-height: 35px;
    width: 35px;
    height: 35px;
    background: #919191;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    footer .newsletter {
        padding-left: 0 !important;
        text-align: left;
    }

    footer .social {
        padding-right: 0 !important;
        text-align: left;
    }
}

/* -------------------------------
   FOOTER VERY BOTTOM
   ------------------------------- */
.footer-last .wrapper,
.footer-last .wrapper a {
    padding: 0 20px;
    color: #b2b7b9;
    font-size: 12px;
    line-height: 1.6em;
    display: block;
}

.footer-last .wrapper .col img {
    max-width: 309px;
    margin: 0 auto;
    display: block;
}

.footer-last .wrapper .col.col30 {
    padding-right: 0;
}

.footer-last .wrapper .col.col30 a {
    padding: 0;
}

@media only screen and (max-width: 1024px) {
    .footer-last .wrapper .col:last-of-type {
        padding-bottom: 70px;
    }
}

/* -------------------------------
   Carousel or marquee - used on domain search page
   ------------------------------- */
#wrapper {
    width: 100%;
    max-width: 2800px;
    margin: 0 auto;

}

.caroufredsel_wrapper {
    width: 100% !important;
}

#carousel div,
#carousel-right div {
    text-align: center;
    width: 400px;
    height: 250px;
    float: left;
    position: relative;
    margin: 0 10px 20px;
    transition: 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.05);
    background-size: contain;
}

#carousel div:hover,
#carousel-right div:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

#carousel div a,
#carousel-right div a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
}

#carousel div h2,
#carousel-right div h2 {
    margin-top: 180px;
    text-align: center;
    width: 100%;
}

#carousel div img,
#carousel-right div img {
    border: none;
    margin-right: 20px;
}

#carousel div span,
#carousel-right div span {
    display: none;
}

#carousel div:hover span,
#carousel-right div:hover span {
    background-color: #333;
    color: #fff;
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    line-height: 22px;
    display: inline-block;
    width: 100px;
    padding: 2px 5px;
    margin: 0 0 0 -50px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    border-radius: 3px;
}

/* -------------------------------
   FEATURES POP UP (used on webhosting pages etc.)
   ------------------------------- */
.features {
    width: 100%;
    position: relative;
}

.features .features-head {
    color: #fff;
    font-size: 14px;
    left: 14px;
    position: absolute;
    text-transform: uppercase;
    top: -46px;
}

.features .purchase {
    width: 100%;
    display: block;
    padding: 40px;
}

.features .purchase h1 span {
    font-size: 0.8em;
    line-height: 1.5em;
    color: #999;
    text-transform: capitalize;
}

.features .price {
    text-transform: uppercase;
}

.features .price span {
    color: #ddd;
    font-size: 0.8em;
    display: block;
}

.features .product-details {
    padding: 0 40px 40px;
}

.features .col .col {
    padding: 0 10px;
}

.features ul,
.features ul li ul {
    padding: 0;
    margin: 0;
}

.features li {
    list-style: none;
    margin: 0;
    position: relative;
    padding: 0;
}

.features ul li ul li {
    padding: 5px 0 5px 16px;
    line-height: 1.3em;
    font-size: 0.9em;
}

.features .col60 li {
    color: #787878;
}

.features ul li ul li:before {
    background: rgba(0, 0, 0, 0) url("../images/structure/icon-sheet.png") no-repeat scroll 0 0;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 10px;
    width: 5px;
}

.features li > h3 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1em;
    color: #787878;
}

.features .key-features {
    background: #fafafa;
    border: 1px dashed #333
}

.features .key-features h3 {
    color: #333;
}

.features .key-features li li {
    border-bottom: 1px solid #ddd;
    padding: 9px 0 9px 20px;
}

.features .key-features li li:before {
    top: 14px;
}

a.compare-link {
    display: block;
    width: 100%;
    text-align: center;
    border-top: 1px solid #eee;
    background: #f0f0f0;
    padding: 20px;
    color: #999;
    line-height: 20px
}

a.compare-link .fa {
    padding-right: 10px;
}

.features input.buy[type="submit"] {
    background: #2fbe49 none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    border: none;
    border-top: 1px solid #8fca18;
    display: block;
    margin: 0;
    padding: 20px;
    text-align: center;
    text-decoration: none !important;
    width: 100%;
    line-height: 20px;
    position: relative;
}

.features input.buy[type="submit"]:before {
    font-family: FontAwesome, sans-serif;
    top: 0;
    left: -5px;
    padding-right: 10px;
    content: "\f0a9";
}

@media only screen and (min-width: 1024px) {
    .features {
        width: 920px;
    }

    .features .purchase h3 {
        width: 100%;
        display: block;
    }
}

/* -------------------------------
   404 PAGE (Error Page)
   ------------------------------- */
.banner-error .wrapper {
    padding: 70px 14px 50px;
    text-align: center;
}

.banner-error .wrapper p {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin: 20px auto;
    padding: 14px 0;
}

.banner-error .wrapper a,
.banner-error .wrapper a:visited {
    margin: 20px auto;
    display: inline-block;
    max-width: 280px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .banner-error .wrapper {
        padding: 320px 14px 290px;
        text-align: center;
    }
}

/* -------------------------------
   LIVE CHAT
   ------------------------------- */
.moreinfo div.bcText {
    display: inline-block;
    background: none;
    position: static;
    height: auto;
    width: auto;
}

.moreinfo div.bcText a {
    color: #fff !important;
}

.moreinfo div.bcText a div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.font-light {
    font-weight: 400 !important;
}

.font-strong {
    font-weight: 600 !important;
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/*Social Share Icons*/
/*jssocials Overwrite*/
#main .wrapper a.jssocials-share-link {
    color: #fff;
}

.jssocials {
    position: absolute;
    top: 240px;
    left: 0;
}

.jssocials-share {
    margin: 0;
    position: relative;
    right: -15px;
    display: block;
    top: 10px
}

.jssocials-shares:before {
    content: "Share";
    color: #aaa;
    position: relative;
    top: 4px;
    right: -14px;
    font-size: 14px;
}

.jssocials-share {
    display: block;
    width: 36px;
}

/* -------------------------------
   IE FIXES (Using JS to target ie 9-11)
   ------------------------------- */
@media only screen and (min-width: 1024px) {
    body.ie11 nav ul.subs li ul,
    body.ie11 nav ul.subs form {
        opacity: 1;
    }
}

/*HELPER CLASSES*/
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-sm {
        display: none !important;
    }
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

/*--------------------------------------------------------------
WEBSITE ADVERTS & OFFERS
--------------------------------------------------------------*/
.mid-ad {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4bb5db+0,2fbe49+100 */
    background: #4bb5db; /* Old browsers */
    background: -moz-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4bb5db), color-stop(100%, #2fbe49)); /* Chrome4-9,Safari4-5 */
    background: -webkit-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* Opera 11.10-11.50 */
    background: -ms-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* IE10 preview */
    background: linear-gradient(to right, #4bb5db 0%, #2fbe49 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4bb5db', endColorstr='#2fbe49', GradientType=1); /* IE6-9 */
    color: #fff;
    text-align: center;
    width: 100%;
    position: relative;
    display: block;
    padding: 40px;
    font-size: 1.2em;
}

.mid-ad p {
    opacity: 1;
}

.mid-ad a.ghostbtn {
    border-color: #fff !important;
    color: #fff !important;
}

.mid-ad a.ghostbtn.chevronup:after {
    content: "\f077";
    position: relative;
    top: -3px;
}

.slide-ad {
    display: none;
}

@media only screen and (min-width: 1024px) {
    .mid-ad {
        display: none
    }

    .slide-ad {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4bb5db+0,2fbe49+100 */
        background: #4bb5db; /* Old browsers */
        background: -moz-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* FF3.6-15 */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4bb5db), color-stop(100%, #2fbe49)); /* Chrome4-9,Safari4-5 */
        background: -webkit-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* Chrome10-25,Safari5.1-6 */
        background: -o-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* Opera 11.10-11.50 */
        background: -ms-linear-gradient(left, #4bb5db 0%, #2fbe49 100%); /* IE10 preview */
        background: linear-gradient(to right, #4bb5db 0%, #2fbe49 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4bb5db', endColorstr='#2fbe49', GradientType=1); /* IE6-9 */
        color: #fff;
        text-align: center;
        width: 100%;
        position: relative;
        display: block;
        padding: 20px;
        font-size: 1.2em;
    }

    .slide-ad strong span {
        font-size: 1.6em;
        letter-spacing: 1px;
    }

    .slide-ad .fa-close {
        position: absolute;
        right: 30px;
        top: 26px;
        font-size: 1.4em;
        line-height: 1em;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }

    .slide-ad .fa-close:hover {
        color: rgba(255, 255, 255, 1);
    }

    .slide-ad a.ghostbtn {
        border-color: #fff !important;
        color: #fff !important;
        margin: 0 0 0 20px;
        font-size: 0.9em;
        height: 40px;
        line-height: 40px;
    }

    .slide-ad a.ghostbtn.chevrondown:after {
        content: "\f078";
        position: relative;
        top: -3px;
    }

}

/*TODO: TEMP - HOTJAR OVERWRITES*/
[id$='_hotjar_branding'] {
    display: none !important;
}

[class$='_feedback_minimized_label'] {
    background: rgba(51, 51, 51, 0.57) !important;
}

[class$='_widget_title'] {
    font-size: 15px !important;
    line-height: 23px !important;
    font-weight: 600 !important;
}

[class$='_icon_face'][data-face="angry"] .path1:before {
    color: #c1e1ff !important;
}

[class$='_icon_face'][data-face="sad"] .path1:before {
    color: #9aceff !important;
}

[class$='_icon_face'][data-face="neutral"] .path1:before {
    color: #77bdff !important;
}

[class$='_icon_face'][data-face="happy"] .path1:before {
    color: #f1bfa7 !important;
}

[class$='_icon_face'][data-face="love"] .path1:before {
    color: #192a76 !important;
}

[class$='_icon_face'][data-face="love"] .path2:before {
    color: #ffffff !important;
}

[class$='_icon_face'][data-face="love"] .path3:before {
    color: #ffffff !important;
}

[class$='_icon_face'][data-face="love"] .path4:before {
    color: #ffffff !important;
}

/*Hide in mobile*/
@media (max-width: 768px) {
    [id$='_hj_feedback_container'] {
        display: none;
    }
}

/*Hide Google reCAPTCHA badge*/
.grecaptcha-badge {
    display: none;
}
nav ul li.headerdomain_nave .fa-close {
    position: absolute;
    color: rgba(0, 0, 0, 0.2);
    top: 11px;
    left: 11px;
    font-size: 20px;
    display: none;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

nav ul li.headerdomain_nave .fa-close:hover {
    color: rgba(0, 0, 0, 0.2);
}

nav ul li.headerdomain_nave.active .fa-close {
    position: absolute;
    display: block;
}

nav ul li.headerdomain_nave {
    display: none;
    position: absolute;
    width: 100%;
    top: 48px;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

nav ul li.headerdomain_nave.active {
    display: block;
}

nav ul li.headerdomain_nave input[type="text"] {
    line-height: 40px;
    height: 40px;
    border: none;
    padding: 10px 16px 10px 44px;
    margin: 0;
    transition: all .3s ease-in-out;
    width: 100%;
}

nav ul li.headerdomain_nave button[type="submit"] {
    content: "\f002";
    font-family: FontAwesome;
    position: absolute;
    background: none;
    color: rgba(236, 95, 25, 1);
    width: 40px;
    height: 40px;
    border: none;
    top: 1px;
    right: 3px;
    transition: ease-in-out 0.3s;
    font-size: 1em;
    cursor: pointer;
}

nav ul li.headerdomain_nave.active {
    display: block;
}