/*
Theme Name: Umbrella Theme
Theme URI: http://www.e3ve.com
Description: Custom WordPress theme by YOUR COMPANY
Version: 1.1
Author: E3ve Web Design
Author URI: http://www.e3ve.com
Tags: 

*/

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:   25;
    
    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design
    
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
    background-color:#f5f5f5;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#outer-frame {
    background-color:#ffffff;
    clear: both;
    margin: 0 auto;
    /* min-height:100vh; */
    width: 100%;
    display: block;
}

#row-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#row-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#row-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-2-1 {
    clear: both;
    float: none;
    margin: 0 auto;
    width: 255px;
    display: block;
}

#col-2-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-3-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-3-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-3-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-4-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-4-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-4-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-4-4 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-23-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-23-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-32-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#col-32-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#wrapper {
    clear: both;
    padding: 0 4% !important;
    width: 92%;
    display: inline-block;
}

#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/****************************************
            Secondary Style
****************************************/
.gridContainer {
    background:f5f5f5;
}
#header {
    background:#cccccc;
}
.header-inner {
    clear: both;
    display: inline-block;
    padding:10px 0;
}
.header-logo {
    width: 92%;
    float: none;
    text-align: left;
    background: #585858;
    padding: 10px 4%;
    position: relative;
}
.header-logo h1 {
    margin: 0 auto;
    float: none;
    width: 132px;
}
.header-logo img {
    height: 40px;
    width: auto;
}
.himages-mobile {
    display: inline-block;
    width: 100%;
    background: #C1C2C4;
}
.himages-mobile img {
    width: 100%;
    height: auto;
}
.hlist-mobile {
    float: left;
    width: 55%;
    height: auto;
    padding: 5px 0;
}
.happ-mobile {
    float: left;
    width: 45%;
    height: auto;
}
.ppb-img {
    display:none;
}
.header-col-2 {
    float: left;
    width: 154px;
    margin-left: 0;
    text-align: center;
    padding: 7px 5px;
    display:none;
}
.header-col-2 img {
    width: 100%;
    height: auto;
}
.header-col-3 {
    float: left;
    width: 145px;
    margin-left: 10px;
    text-align: center;
    display:none;
}
.header-col-3 img {
    width: 100%;
    height: auto;
}
.header-col-4 {
    float: left;
    width: 100%;
    margin-left:0;
    padding:7px 0 0 !important;
    text-align: center;
}
.header-col-4 p, .header-col-4 h2 {
    margin:0 auto;
}
.header-col-4 p {
    font-size: 10px;
}
.header-col-4 h2 {
    font-size: 20px;
}
.header-guide {
    display:block;
}
.nav {
    clear: both;
    border-top: 1px solid #E2E2E2;
    display: inline-block;
    width: 100% !important;
}
#menu-icon {
    float: none;
    font-size: 25px;
    border: 1px solid;
    padding: 0 9px;
    border-radius: 3px;
    margin: 0;
    display: block;
    line-height: 38px;
    color: #fff;
    position: absolute;
}
.nav ul {
    display: none;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 0;
}
.nav ul li {
    display:inline;
}
.nav ul li a {
    display:block;
    line-height:35px;
    padding:0 10px;
    text-transform:uppercase;
    color:#777777;
}

.nav ul li a:hover {
    color:#d7090a;
}
#page-content {
    clear:both;
    padding: 20px 0;
    background: #ffffff;
}
#row-1 {
    background: #d7090a;
    color: #ffffff;
}
#row-2 {
    background: #cccccc;
}
#footer {
    background: #cccccc;
}
.home-intro {
    display: block;
    padding: 30px 0;
}
#col-23-1 {
    background: #f5f5f5;
}
#col-23-2 {
    background: #f5f5f5;
}
.home-services-wrapper {
    display:block;
    padding: 20px 20px 0 !important;
    box-shadow: 0 -7px 26px -23px inset;
}
#col-3-1 {
    width:100% !important;
    margin-bottom: 20px;
    margin-top: 20px;
}
#col-3-2 {
    width:100% !important;
    margin-left:0 !important;
    margin-bottom: 20px;
}
#col-3-3 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0;
    margin-bottom: 20px;
}
.home-service {
    background:#ffffff;
    padding:20px;
    position:relative;
    border-radius: 10px 10px 0 0;
}
.home-service h3 {
    text-transform: uppercase;
    color: #d7090a;
    text-align: left;
    margin: 0 auto 30px;
    padding: 0;
    border-bottom: 1px dotted;
}
a.more-services {
    position: absolute;
    top: 42px;
    right: 30px;
    font-weight: bold;
    color: #107DFF !important;
    text-transform: lowercase;
    font-family: 'Courgette', cursive;
}
a.more-services::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    transition:all 0.3s;
    top:0;
}
a.more-services:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    top:0;
}
.home-service ul {
    text-align:left;
    margin:0 auto;
    padding-left: 0 !important;
}
.home-service ul li {
    line-height:23px;
    list-style: none;
    
}
.home-service ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.home-service-img {
    background: #e2e2e2;
    padding:20px;
    text-align: center;
}
.h-main-content {
    display:inline-block;
    padding:20px 0;
}
.h-main-content h3 {
    font-family: 'Courgette', cursive;
    font-size: 26px;
}
.h-main-content p {
    line-height:23px;
}
#col-32-1 img {
    width: 100%;
    margin: 0 auto 20px;
}
.footer-nav {
    background:#E2E2E2;
}
ul.fn {
    margin:0 auto;
    display:block;
    text-align:center;
    width:100%;
    padding:20px 0 0;
}
ul.fn li {
    display:block;
}
ul.fn li a {
    display: block;
    line-height: 25px;
    color:#333333;
    text-transform:uppercase;
}
ul.fn li a:hover {
    color:#d7090a;
}
ul.fn-social {
    margin:0 auto;
    display:block;
    text-align:center;
    width:100%;
}
ul.fn-social li {
    display:inline-block;
    padding: 0 7px;
}
ul.fn-social li a {
    display: block;
    line-height: 50px;
    color:#d7090a;
    font-size: 18px;
    min-width: 16px;
}
ul.fn-social li a:hover {
    color:#333333;
}
.footer-links {
    padding:20px 0;
}
.fl-1, .fl-2, .fl-3, .fl-4, .fl-5 {
    float:left;
    width: 100%;
    margin: 0 auto 20px;
}
.fl-5 {
    margin: 0 auto 0 !important;
}
.footer-links ul {
    margin:0 auto;
    padding:0 10px;
}
.footer-links ul li {
    
}
.footer-links a {
    color:#333333;
    display:block;
    text-align:center;
    line-height:23px;
}
.footer-links a:hover {
    color:#d7090a;
}
.footer-bottom {
    background:#8F8F8F;
    color:#ffffff;
    padding:20px 0;
}
a.f-apple {
    display: inline-block;
}
a.f-android {
    display: inline-block;
}
a.f-apple img, a.f-android img {
    height: 37px;
    padding: 0 0 10px;
}
.footer-copyright {
    margin:0 auto;
    line-height:18px;
}
/****************************************
            Secondary Style
****************************************//****************Account Type page***************/
.at-offer-container {
    display: inline-block;
    margin: 50px auto 0;
    position:relative;
}
.ato-bg {
    display: none;
    height: 163px;
    position: absolute;
    top: -50px;
    background: #e6e6e6;
    width: 960px;
    z-index: 0;
    left: -20px;
}
.ato {
    float: left;
    width: 100%;
    margin: 0 auto 20px;
    z-index: 1;
    position: relative;
}
.atoshadow {
       box-shadow: none;
       position: relative;
       top: 0;
       z-index: 2;
}
.offerbox-shadow {
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/02/box-shadow.png)no-repeat scroll center center transparent;
    width: 350px;
    height: 475px;
    z-index: 1;
    display: none;
    position: absolute;
    right: 283px;
    top: -30px;
}
.ato-heading {
    text-align: center;
    padding: 10px;
    background: #d7090a;
        color:#ffffff;
}
.atoshadow .ato-heading {
    background: #d7090a !important;
    color: #fff;
}
.atob {
    background: #d7090a !important;
}
.atop {
    background: #d7090a !important;
}
.ato-heading h3, .ato-heading p {
    margin: 0 auto;
}
.ato-body {
    background: #f5f5f5;
}
.ato-price {
    text-align: center;
    padding: 10px;
    background: #EEEEEE;
}
.ato-price h4, .ato-price p {
    margin: 0 auto;
}
.ato-price p {
   font-size:12px !important;
}
.ato-price h4 span {
    
}
.ato-body ul {
    padding: 10px;
    margin: 0 auto;
    min-height: 268px;
}
.atoshadow .ato-body ul {
    min-height: 255px !important;
}
.ato-body ul li {
    line-height:24px;
    list-style: none;
}
.ato-body ul li::before {
    content: "\f14a";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
    
}
.mp-ribbon {
    height: 50px;
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/03/most-popular-ribbon-4.png)no-repeat scroll 0 0 transparent;
    color: #fff;
    width: 246px;
    border-radius: 0;
    position: absolute;
    background-size: contain;
    left: 23px;
    top: -35px;
}
.ato-btn-1, .ato-btn-2 {
    padding: 10px;
    text-align: center;
    min-height: 66px;
}
.ato-btn-1 p, .ato-btn-2 p {
    margin: 0 auto;
}
.atop-s {
    font-size: 11px !important;
    margin: 5px auto !important;
}
.atop-includes {
    position: absolute;
    left: 0;
    bottom: 79px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: bold;
}
.atop-secoption {
    background: transparent !important;
    border: none !important;
    display: inline !important;
    color: #333 !important;
    text-transform: capitalize !important;
    width: auto !important;
    line-height: normal !important;
}
.atop-secoption::after {
    color: #333333 !important;
}
.ato-btn-1 a {
    background: #d7090a;
    border:1px solid #d7090a;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-1 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-1 a:hover {
    background: transparent;
    border:1px solid #d7090a;
    color: #d7090a;
}
.ato-btn-1 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #d7090a;
}
.ato-btn-2 a {
    background: #d7090a;
    border:1px solid #d7090a;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-2 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-2 a:hover {
    background: transparent;
    border:1px solid #d7090a;
    color: #d7090a;
}
.ato-btn-2 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #d7090a;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
    background-color:#f5f5f5;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
#outer-frame {
    background-color:#ffffff;
    clear: both;
    margin: 0 auto;
    /* min-height:100vh; */
    width: 481px;
    display: block;
}
#row-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#row-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#row-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-2-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-2-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-3-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-3-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-3-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-4-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.7179%;
    display: block;
}
#col-4-2 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 48.7179%;
    display: block;
}
#col-4-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.7179%;
    display: block;
}
#col-4-4 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 48.7179%;
    display: block;
}
#col-23-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-23-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-32-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-32-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#wrapper {
    clear: both;
    padding: 0 4% !important;
    width: 92%;
    display: inline-block;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/****************************************
            Secondary Style
****************************************/
.gridContainer {
    background:f5f5f5;
}
#header {
    background:#cccccc;
}
.header-inner {
    clear: both;
    display: inline-block;
    padding:10px 0;
}
.header-logo {
    width: 92%;
    float: left;
    text-align: left;
    background: #585858;
    padding: 10px 4%;
}
.header-logo h1 {
    margin: 0 auto;
    float: none;
    width: 132px;
}
.header-logo img {
    height: 40px;
    width: auto;
}
.himages-mobile {
    display: inline-block;
    width: 100%;
    background: #C1C2C4;
}
.himages-mobile img {
    width: 100%;
    height: auto;
}
.hlist-mobile {
    float: left;
    width: 260px;
    height: auto;
    padding: 5px 0;
}
.happ-mobile {
    float: left;
    width: 220px;
    height: auto;
}
.ppb-img {
    display:none;
}
.header-col-2 {
    float: left;
    width: 230px;
    margin-left: 0;
    text-align: center;
    padding: 7px 5px;
    display:none;
}
.header-col-2 img {
    width: 100%;
    height: auto;
}
.header-col-3 {
    float: left;
    width: 220px;
    margin-left: 20px;
    text-align: center;
    display:none;
}
.header-col-3 img {
    width: 100%;
    height: auto;
}
.header-col-4 {
    float: left;
    width: 100%;
    margin-left:0;
    padding:7px 0 !important;
    text-align: center;
}
.header-col-4 p, .header-col-4 h2 {
    margin:0 auto;
}
.header-col-4 h2 {
    font-size: 27px;
}
.header-guide {
    display:block;
}
.nav {
    clear: both;
    border-top: 1px solid #E2E2E2;
    display: inline-block;
    width: 100% !important;
}
#menu-icon {
    float: left;
    font-size: 25px;
    border: 1px solid;
    padding: 0 9px;
    border-radius: 3px;
    margin: 0;
    display: block;
    line-height: 38px;
    color: #fff;
}
.nav ul {
    display: none;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 0;
}
.nav ul li {
    display:inline;
}
.nav ul li a {
    display:block;
    line-height:35px;
    padding:0 10px;
    text-transform:uppercase;
    color:#777777;
}

.nav ul li a:hover {
    color:#d7090a;
}
#page-content {
    clear:both;
    padding: 20px 0;
    background: #ffffff;
}
#row-1 {
    background: #d7090a;
    color: #ffffff;
}
#row-2 {
    background: #cccccc;
}
#footer {
    background: #cccccc;
}
.home-intro {
    display: block;
    padding: 30px 0;
}
#col-23-1 {
    background: #f5f5f5;
}
#col-23-2 {
    background: #f5f5f5;
}
.home-services-wrapper {
    display:block;
    padding: 20px 20px 0 !important;
    box-shadow: 0 -7px 26px -23px inset;
}
#col-3-1 {
    width:100% !important;
    margin-bottom: 20px;
}
#col-3-2 {
    width:100% !important;
    margin-left:0 !important;
    margin-bottom: 20px;
}
#col-3-3 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0;
    margin-bottom: 20px;
}
.home-service {
    background:#ffffff;
    padding:20px;
    position:relative;
    border-radius: 10px 10px 0 0;
}
.home-service h3 {
    text-transform: uppercase;
    color: #d7090a;
    text-align: left;
    margin: 0 auto 30px;
    padding: 0;
    border-bottom: 1px dotted;
}
a.more-services {
    position: absolute;
    top: 42px;
    right: 30px;
    font-weight: bold;
    color: #107DFF !important;
    text-transform: lowercase;
    font-family: 'Courgette', cursive;
}
a.more-services::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    transition:all 0.3s;
    top:0;
}
a.more-services:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    top:0;
}
.home-service ul {
    text-align:left;
    margin:0 auto;
}
.home-service ul li {
    line-height:23px;
}
.home-service ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.home-service-img {
    background: #e2e2e2;
    padding:20px;
    text-align: center;
}
.h-main-content {
    display:inline-block;
    padding:20px 0;
}
.h-main-content h3 {
    font-family: 'Courgette', cursive;
    font-size: 26px;
}
.h-main-content p {
    line-height:23px;
}
#col-32-1 img {
    width: 100%;
    margin: 0 auto 20px;
}
.footer-nav {
    background:#E2E2E2;
}
ul.fn {
    margin:0 auto;
    display:table;
    text-align:center;
    width:100%;
    padding:0px 0 0;
}
ul.fn li {
    display:block;
}
ul.fn li a {
    display: block;
    line-height: 25px;
    color:#333333;
    text-transform:uppercase;
}
ul.fn li a:hover {
    color:#d7090a;
}
ul.fn-social {
    margin:0 auto;
    display:block;
    text-align:center;
    width:100%;
}
ul.fn-social li {
    display:inline-block;
}
ul.fn-social li a {
    display: block;
    line-height: 50px;
    color:#d7090a;
    font-size: 18px;
    min-width: 16px;
}
ul.fn-social li a:hover {
    color:#333333;
}
.footer-links {
    padding:20px 0;
}
.fl-1, .fl-2, .fl-3, .fl-4, .fl-5 {
    float:left;
    width: 100%;
    margin: 0 auto 20px;
}
.footer-links ul {
    margin:0 auto;
    padding:0 10px;
}
.footer-links ul li {
    
}
.footer-links a {
    color:#333333;
    display:block;
    text-align:center;
    line-height:23px;
}
.footer-links a:hover {
    color:#d7090a;
}
.footer-bottom {
    background:#8F8F8F;
    color:#ffffff;
    padding:20px 0;
}
a.f-apple {
    display: inline-block;
}
a.f-android {
    display: inline-block;
}
a.f-apple img, a.f-android img {
    height: 64px;
    padding: 5px 0;
}
.footer-copyright {
    margin:0 auto;
    line-height:18px;
}
/****************************************
            Secondary Style
****************************************//****************Account Type page***************/
.at-offer-container {
    display: inline-block;
    margin: 50px auto 0;
    position:relative;
}
.ato-bg {
    display: none;
    height: 163px;
    position: absolute;
    top: -50px;
    background: #e6e6e6;
    width: 960px;
    z-index: 0;
    left: -20px;
}
.ato {
    float: left;
    width: 100%;
    margin: 0 auto 20px;
    z-index: 1;
    position: relative;
}
.atoshadow {
       box-shadow: none;
       position: relative;
       top: 0;
       z-index: 2;
}
.offerbox-shadow {
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/02/box-shadow.png)no-repeat scroll center center transparent;
    width: 350px;
    height: 475px;
    z-index: 1;
    display: none;
    position: absolute;
    right: 283px;
    top: -30px;
}
.ato-heading {
    text-align: center;
    padding: 10px;
    background: #d7090a;
        color:#ffffff;
}
.atoshadow .ato-heading {
    background: #d7090a !important;
    color: #fff;
}
.atob {
    background: #d7090a !important;
}
.atop {
    background: #d7090a !important;
}
.ato-heading h3, .ato-heading p {
    margin: 0 auto;
}
.ato-body {
    background: #f5f5f5;
}
.ato-price {
    text-align: center;
    padding: 10px;
    background: #EEEEEE;
}
.ato-price h4, .ato-price p {
    margin: 0 auto;
}
.ato-price p {
   font-size:12px !important;
}
.ato-price h4 span {
    
}
.ato-body ul {
    padding: 10px;
    margin: 0 auto;
    min-height: 257px;
}
.atoshadow .ato-body ul {
    min-height: 255px !important;
}
.ato-body ul li {
    line-height:24px;
}
.ato-body ul li::before {
    content: "\f14a";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.mp-ribbon {
    height: 50px;
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/03/most-popular-ribbon-4.png)no-repeat scroll 0 0 transparent;
    color: #fff;
    width: 246px;
    border-radius: 0;
    position: absolute;
    background-size: contain;
    left: 97px;
    top: -35px;
}
.ato-btn-1, .ato-btn-2 {
    padding: 10px;
    text-align: center;
    min-height: 66px;
}
.ato-btn-1 p, .ato-btn-2 p {
    margin: 0 auto;
}
.atop-s {
    font-size: 11px !important;
    margin: 5px auto !important;
}
.atop-includes {
    position: absolute;
    left: 0;
    bottom: 79px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: bold;
}
.atop-secoption {
    background: transparent !important;
    border: none !important;
    display: inline !important;
    color: #333 !important;
    text-transform: capitalize !important;
    width: auto !important;
    line-height: normal !important;
}
.atop-secoption::after {
    color: #333333 !important;
}
.ato-btn-1 a {
    background: #d7090a;
    border:1px solid #d7090a;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-1 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-1 a:hover {
    background: transparent;
    border:1px solid #d7090a;
    color: #d7090a;
}
.ato-btn-1 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #d7090a;
}
.ato-btn-2 a {
    background: #d7090a;
    border:1px solid #d7090a;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-2 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-2 a:hover {
    background: transparent;
    border:1px solid #d7090a;
    color: #d7090a;
}
.ato-btn-2 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #d7090a;
}
}

/* Desktop Layout: 769px to a max of 959px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    background-color:#f5f5f5;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: auto;
}
#outer-frame {
    background-color:#ffffff;
    clear: both;
    margin: 0 auto;
    /* min-height:100vh; */
    width: 769px;
    display: grid;
}
#row-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#row-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#row-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-2-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.9795%;
    display: block;
}
#col-2-2 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 48.9795%;
    display: block;
}
#col-3-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 31.9728%;
    display: block;
}
#col-3-2 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 31.9728%;
    display: block;
}
#col-3-3 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 31.9728%;
    display: block;
}
#col-4-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 18.3673%;
    display: block;
}
#col-4-2 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#col-4-3 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#col-4-4 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#col-23-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-23-2 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-32-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 313px;
}
#col-32-2 {
    clear: none;
    float: left;
    margin-left: 19px;
    width: 397px;
    display: block;
}
#wrapper {
    clear: both;
    padding: 0 20px !important;
    width: 729px;
    display: inline-block;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/****************************************
            Secondary Style
****************************************/
.gridContainer {
    background:f5f5f5;
}
#header {
    background:#cccccc;
}
.header-inner {
    clear: both;
    display: inline-block;
    padding:10px 0;
}
.header-logo {
    width: 729px;
    float: left;
    text-align: left;
    background: #585858;
    padding: 10px 20px;
}
.header-logo h1 {
    margin: 0 auto;
    float: none;
    width: 132px;
}
.header-logo img {
    height: 40px;
    width: auto;
}
.himages-mobile {
    display: inline-block;
    width: 100%;
    background: #C1C2C4;
}
.himages-mobile img {
    width: 100%;
    height: auto;
}
.hlist-mobile {
    float: left;
    width: 410px;
    height: auto;
    padding: 5px 0;
}
.happ-mobile {
    float: left;
    width: 350px;
    height: auto;
}
.ppb-img {
    display:none;
}
.header-col-2 {
    float: left;
    width: 249px;
    margin-left: 0;
    padding: 7px 5px;
    display:none;
}
.header-col-3 {
    float: left;
    width: 230px;
    margin-left:10px;
    display:none;
}
.header-col-4 {
    float: left;
    width: 100%;
    margin-left:0;
    padding:21px 0 !important;
    text-align: center;
}
.header-col-4 p, .header-col-4 h2 {
    margin:0 auto;
}
.header-col-4 h2 {
    font-size: 27px;
}
.header-guide {
    display:block;
}
.nav {
    clear: both;
    border-top: 1px solid #E2E2E2;
    display: inline-block;
    width: 100% !important;
}
#menu-icon {
    float: left;
    font-size: 25px;
    border: 1px solid;
    padding: 0 9px;
    border-radius: 3px;
    margin: 0;
    display: block;
    line-height: 38px;
    color: #fff;
}
.nav ul {
    display: none;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 0;
}
.nav ul li {
    display:inline;
}
.nav ul li a {
    display:block;
    line-height:35px;
    padding:0 10px;
    text-transform:uppercase;
    color:#777777;
}

.nav ul li a:hover {
    color:#d7090a;
}
#page-content {
    clear:both;
    padding: 20px 0;
    background: #ffffff;
}
#row-1 {
    background: #d7090a;
    color: #ffffff;
}
#row-2 {
    background: #cccccc;
}
#footer {
    background: #cccccc;
}
.home-intro {
    display: block;
    padding: 30px 0;
}
#col-23-1 {
    background: #cccccc;
}
#col-23-2 {
    background: #f5f5f5;
}
.home-services-wrapper {
    display:block;
    padding: 20px 20px 0 !important;
    box-shadow: 0 -7px 26px -23px inset;
}
#col-3-1 {
    width:49% !important;
    margin-bottom: 0;
    margin-top: 20px;
}
#col-3-2 {
    width:49% !important;
    margin-left:2% !important;
    margin-bottom: 0;
    margin-top: 20px;
}
#col-3-3 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 20px;
    margin-bottom: 20px;
}
.home-service {
    background:#ffffff;
    padding:20px;
    position:relative;
    border-radius: 10px 10px 0 0;
}
.home-service h3 {
    text-transform: uppercase;
    color: #d7090a;
    text-align: left;
    margin: 0 auto 30px;
    padding: 0;
    border-bottom: 1px dotted;
}
a.more-services {
    position: absolute;
    top: 42px;
    right: 30px;
    font-weight: bold;
    color: #107DFF !important;
    text-transform: lowercase;
    font-family: 'Courgette', cursive;
}
a.more-services::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    transition:all 0.3s;
    top:0;
}
a.more-services:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    top:0;
}
.home-service ul {
    text-align:left;
    margin:0 auto;
}
.home-service ul li {
    line-height:23px;
}
.home-service ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.home-service-img {
    background: #e2e2e2;
    padding:20px;
    text-align: center;
}
.h-main-content {
    display:inline-block;
    padding:50px 0;
}
.h-main-content h3 {
    font-family: 'Courgette', cursive;
    font-size: 26px;
}
.h-main-content p {
    line-height:23px;
}
#col-32-1 img {
    width: 100%;
    margin: 0 auto;
}
.footer-nav {
    background:#E2E2E2;
}
ul.fn {
    margin:0 auto;
    display:table;
    text-align:center;
    width:100%;
    padding:0;
}
ul.fn li {
    display:table-cell;
}
ul.fn li a {
    display: block;
    line-height: 50px;
    color:#333333;
    text-transform:uppercase;
}
ul.fn li a:hover {
    color:#d7090a;
}
ul.fn-social {
    margin:0 auto;
    display:block;
    text-align:center;
    width:100%;
}
ul.fn-social li {
    display:inline-block;
}
ul.fn-social li a {
    display: block;
    line-height: 50px;
    color:#d7090a;
    font-size: 18px;
    min-width: 16px;
}
ul.fn-social li a:hover {
    color:#333333;
}
.footer-links {
    padding:20px 0;
}
.fl-1, .fl-2, .fl-3, .fl-4, .fl-5 {
    float:left;
    width: 243px;
    margin: 0 auto 20px;
}
.footer-links ul {
    margin:0 auto;
    padding:0 10px;
}
.footer-links ul li {
    
}
.footer-links a {
    color:#333333;
    display:block;
    text-align:center;
    line-height:23px;
}
.footer-links a:hover {
    color:#d7090a;
}
.footer-bottom {
    background:#8F8F8F;
    color:#ffffff;
    padding:20px 0;
}
a.f-apple {
    display: inline-block;
}
a.f-android {
    display: inline-block;
}
a.f-apple img, a.f-android img {
    height: 51px;
    padding: 50px 0;
}
.footer-copyright {
    margin:0 auto;
    line-height:18px;
}/****************Account Type page***************/
.at-offer-container {
    display: inline-block;
    margin: 50px auto 0;
    position:relative;
}
.ato-bg {
    display: block;
    height: 178px;
    position: absolute;
    top: -50px;
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/02/ato-bg-769.jpg)no-repeat scroll 0 0 #e6e6e6;
    width: 769px;
    z-index: 0;
    left: -20px;
}
.ato {
    float: left;
    width: 243px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}
.atoshadow {
       box-shadow: none;
       position: relative;
       top: -30px;
       z-index: 2;
}
.offerbox-shadow {
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/02/box-shadow-s769.png)no-repeat scroll center center transparent;
    width: 276px;
    height: 808px;
    z-index: 1;
    display: block;
    position: absolute;
    right: 227px;
    top: -162px;
    background-size: contain;
}
.ato-heading {
    text-align: center;
    padding: 10px;
    background: #d7090a;
        color:#ffffff;
}
.atoshadow .ato-heading {
    background: #f5292a !important;
    color: #fff;
}
.atob {
    background: #f76b6c !important;
}
.atop {
    background: #f76b6c !important;
}
.ato-heading h3, .ato-heading p {
    margin: 0 auto;
}
.ato-body {
    background: #f5f5f5;
}
.ato-price {
    text-align: center;
    padding: 10px;
    background: #EEEEEE;
}
.ato-price h4, .ato-price p {
    margin: 0 auto;
}
.ato-price p {
   font-size:12px !important;
}
.ato-price h4 span {
    
}
.ato-body ul {
    padding: 10px;
    margin: 0 auto;
    min-height: 267px;
}
.atoshadow .ato-body ul {
    min-height: 312px !important;
}
.ato-body ul li {
    line-height:24px;
}
.ato-body ul li::before {
    content: "\f14a";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.mp-ribbon {
    height: 36px;
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/03/most-popular-ribbon-4.png)no-repeat scroll 0 0 transparent;
    color: #fff;
    width: 179px;
    border-radius: 0;
    position: absolute;
    background-size: contain;
    left: 29px;
    top: -27px;
}
.ato-btn-1, .ato-btn-2 {
    padding: 10px;
    text-align: center;
    min-height: 80px;
}
.ato-btn-1 p, .ato-btn-2 p {
    margin: 0 auto;
}
.atop-s {
    font-size: 11px !important;
    margin: 5px auto !important;
}
.atop-includes {
    position: absolute;
    left: 0;
    bottom: 79px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: bold;
}
.atop-secoption {
    background: transparent !important;
    border: none !important;
    display: inline !important;
    color: #333 !important;
    text-transform: capitalize !important;
    width: auto !important;
    line-height: normal !important;
}
.atop-secoption::after {
    color: #333333 !important;
}
.ato-btn-1 a {
    background: #f5292a;
    border:1px solid #f5292a;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-1 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-1 a:hover {
    background: transparent;
    border:1px solid #f5292a;
    color: #f5292a;
}
.ato-btn-1 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #f5292a;
}
.ato-btn-2 a {
    background: #f76b6c;
    border:1px solid #f76b6c;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-2 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-2 a:hover {
    background: transparent;
    border:1px solid #f76b6c;
    color: #f76b6c;
}
.ato-btn-2 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #f76b6c;
}
}
/* Desktop Layout: mininmum layout of 960px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 960px) {
.gridContainer {
    background-color:#f5f5f5;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: auto;
}
#outer-frame {
    background-color:#ffffff;
    clear: both;
    margin: 0 auto;
    /* min-height:100vh; */
    width: 960px;
    display: grid;
}
#row-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#row-2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#row-3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#col-2-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.9795%;
    display: block;
}
#col-2-2 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 48.9795%;
    display: block;
}
#col-3-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 31.9728%;
    display: block;
}
#col-3-2 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 31.9728%;
    display: block;
}
#col-3-3 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 31.9728%;
    display: block;
}
#col-4-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 18.3673%;
    display: block;
}
#col-4-2 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#col-4-3 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#col-4-4 {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 18.3673%;
    display: block;
}
#col-23-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 67.388%;
    display: block;
}
#col-23-2 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 32.7%;
    display: block;
}
#col-32-1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 376px;
}
#col-32-2 {
    clear: none;
    float: left;
    margin-left: 19px;
    width: 525px;
    display: block;
}
#wrapper {
    clear: both;
    padding: 0 20px !important;
    width: 920px;
    display: inline-block;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/****************************************
            Secondary Style
****************************************/
.gridContainer {
    background:f5f5f5;
}
#header {
    background:#cccccc;
}
.header-inner {
    clear: both;
    display: inline-block;
    padding:10px 0;
}
.header-logo {
    width: 280px;
    float: left;
    text-align:center;
    background: transparent;
    padding: 0;
}
.header-logo h1 {
    margin: 0;
    float: left;
    width:280px;
}
.header-logo img {
    height:85px;
    width:auto;
}
.himages-mobile {
    display: none;
    width: 100%;
    background: #C1C2C4;
}
.himages-mobile img {
    width: 100%;
    height: auto;
}
.hlist-mobile {
    float: left;
    width: 410px;
    height: auto;
    padding: 5px 0;
}
.happ-mobile {
    float: left;
    width: 350px;
    height: auto;
}
.ppb-img {
    display:block;
}
.header-col-2 {
    float: left;
    width: 200px;
    margin-left:10px;
    padding: 0;
    display:block;
}
.header-col-3 {
    float: left;
    width: 175px;
    margin-left:10px;
    display:block;
}
.header-col-4 {
    float: left;
    width: 235px;
    margin-left:10px;
    padding:7px 0 !important;
}
.header-col-4 p, .header-col-4 h2 {
    margin:0 auto;
}
.header-col-4 h2 {
    font-size: 27px;
}
.header-guide {
    display:none;
}
.nav {
    clear: both;
    border-top: 1px solid #E2E2E2;
    width:920px !important;
}
#menu-icon {
    float: left;
    font-size: 25px;
    border: 1px solid;
    padding: 0 9px;
    border-radius: 3px;
    margin: 0;
    display: none;
    line-height: 38px;
    color: #fff;
}
.nav ul {
    display: table;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: inherit;
    background: transparent;
}
.nav ul li {
    display:table-cell;
}
.nav ul li a {
    display:block;
    line-height:35px;
    padding:0 10px;
    text-transform:uppercase;
    color:#777777;
}

.nav ul li a:hover {
    color:#d7090a;
}
li.menu-item-has-children {
    position:relative;
}
li.menu-item-has-children::after {
    content: "\f107";
    color:#d7090a;
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    opacity:0;
    position: absolute;
    right: 10px;
    font-size: 16px;
    transition:all 0.3s;
    top:0px;
    line-height: 35px;
}
li.menu-item-has-children:hover::after {
    content: "\f107";
    color:#d7090a;
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    opacity: 1;
    position: absolute;
    right: 0;
    font-size: 16px;
    top: 0px;
    line-height: 35px;
}
li.menu-item-has-children:last-child > ul.sub-menu {
    left:auto;
    right:0;
}
ul.sub-menu {
    position: absolute;
    top: 100%;
    background: #f5f5f5;
    display: none;
    min-width: auto;
    left: 0;
    text-align: left;
    padding: 0 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
ul.sub-menu li {
    display:block;
}
ul.sub-menu li {
    display:block;
}
#page-content {
    clear:both;
    padding: 20px 0;
    background: #ffffff;
}
#row-1 {
    background: #0099BD;
    color: #ffffff;
}
#row-2 {
    background: #cccccc;
}
#footer {
    background: #cccccc;
}
.home-intro {
    display: flex;
    padding: 30px 0;
}
#col-23-1 {
    background: #f5f5f5;
}
#col-23-2 {
    background: #f5f5f5;
}
.home-services-wrapper {
    display:flex;
    padding: 20px 20px 0 !important;
    box-shadow: 0 -7px 26px -23px inset;
}
#col-3-1 {
    width:294px !important;
    margin-bottom: 0;
    margin-top: 20px;
}
#col-3-2 {
    width:294px !important;
    margin-left:18px !important;
    margin-bottom: 0;
    margin-top: 20px;
}
#col-3-3 {
    width:294px !important;
    margin-left:18px !important;
    margin-top: 20px;
    margin-bottom: 0;
}
.home-service {
    background:#ffffff;
    padding:20px;
    position:relative;
    border-radius: 10px 10px 0 0;
}
.home-service h3 {
    text-transform: uppercase;
    color: #d7090a;
    text-align: left;
    margin: 0 auto 30px;
    padding: 0;
    border-bottom: 1px dotted;
}
a.more-services {
    position: absolute;
    top: 42px;
    right: 30px;
    font-weight: bold;
    color: #107DFF !important;
    text-transform: lowercase;
    font-family: 'Courgette', cursive;
}
a.more-services::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    transition:all 0.3s;
    top:0;
}
a.more-services:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #107DFF;
    opacity:1;
    position: absolute;
    right: -20px;
    font-size: 14px;
    top:0;
}
.home-service ul {
    text-align:left;
    margin:0 auto;
    padding-left: 0 !important;
}
.home-service ul li {
    line-height:23px;
}
.home-service ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.home-service-img {
    background: #e2e2e2;
    padding:20px;
    text-align: center;
}
.h-main-content {
    display:flex;
    padding:50px 0 10px 0 !important;
}
.h-main-content h3 {
    font-family: 'Courgette', cursive;
    font-size: 26px;
}
.h-main-content p {
    line-height:23px;
}
#col-32-1 img {
    width: 100%;
    margin: 0 auto;
}
.footer-nav {
    background:#E2E2E2;
}
ul.fn {
    margin:0 auto;
    display:table;
    text-align:center;
    width:100%;
    padding:0;
}
ul.fn li {
    display:table-cell;
}
ul.fn li a {
    display: block;
    line-height: 50px;
    color:#333333;
    text-transform:uppercase;
}
ul.fn li a:hover {
    color:#d7090a;
}
ul.fn-social {
    margin:0 auto;
    display:table;
    text-align:center;
    width:100%;
}
ul.fn-social li {
    /* display:table-cell; */
    display: inline-block;  
}
ul.fn-social li a {
    display: block;
    line-height: 50px;
    color:#d7090a;
    font-size: 18px;
    min-width: 16px;
}
ul.fn-social li a:hover {
    color:#333333;
}
.footer-links {
    padding:20px 0;
}
.fl-1, .fl-2, .fl-3, .fl-4, .fl-5 {
    float:left;
    width:184px;
    margin: 0 auto;
}
.footer-links ul {
    margin:0 auto;
    padding:0 10px;
}
.footer-links ul li {
    
}
.footer-links a {
    color:#333333;
    display:block;
    text-align:center;
    line-height:23px;
}
.footer-links a:hover {
    color:#d7090a;
}
.footer-bottom {
    background:#8F8F8F;
    color:#ffffff;
    padding:20px 0;
}
a.f-apple {
    display: inline-block;
}
a.f-android {
    display: inline-block;
}
a.f-apple img, a.f-android img {
    height: 65px;
    padding: 10px 0;
}
.footer-copyright {
    margin:0 auto;
    line-height:18px;
}

/****************Account Type page***************/
.at-offer-container {
    display: inline-block;
    margin: 50px auto 0;
    position:relative;
}
.ato-bg {
    display: block;
    height: 163px;
    position: absolute;
    top: -50px;
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/02/ato-bg-960.jpg)no-repeat scroll 0 0 #e6e6e6;
    width: 960px;
    z-index: 0;
    left: -20px;
}
.ato {
    float: left;
    width: 306px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}
.atoshadow {
       box-shadow: none;
       position: relative;
       top: -30px;
       z-index: 2;
}
.offerbox-shadow {
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/02/box-shadow.png)no-repeat scroll center center transparent;
    width: 352px;
    height: 519px;
    z-index: 1;
    display: block;
    position: absolute;
    right: 283px;
    top: -30px;
    background-size: unset;
}
.ato-heading {
    text-align: center;
    padding: 10px;
    background: #d7090a;
        color:#ffffff;
}
.atoshadow .ato-heading {
    background: #f5292a !important;
    color: #fff;
}
.atob {
    background: #f76b6c !important;
}
.atop {
    background: #f76b6c !important;
}
.ato-heading h3, .ato-heading p {
    margin: 0 auto;
}
.ato-body {
    background: #f5f5f5;
}
.ato-price {
    text-align: center;
    padding: 10px;
    background: #EEEEEE;
}
.ato-price h4, .ato-price p {
    margin: 0 auto;
}
.ato-price p {
   font-size:12px !important;
}
.ato-price h4 span {
    
}
.ato-body ul {
    padding: 10px;
    margin: 0 auto;
    min-height: 268px;
}
.atoshadow .ato-body ul {
    min-height: 298px !important;
}
.ato-body ul li {
    line-height:24px;
}
.ato-body ul li::before {
    content: "\f14a";
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    color: #d7090a;
}
.mp-ribbon {
    height: 50px;
    background: url(https://www.managedmailservice.co.uk/wp-content/uploads/2018/03/most-popular-ribbon-4.png)no-repeat scroll 0 0 transparent;
    color: #fff;
    width: 246px;
    border-radius: 0;
    position: absolute;
    background-size: contain;
    left: 29px;
    top: -35px;
}
.ato-btn-1, .ato-btn-2 {
    padding: 10px;
    text-align: center;
    min-height: 66px;
}
.ato-btn-1 p, .ato-btn-2 p {
    margin: 0 auto;
}
.atop-s {
    font-size: 11px !important;
    margin: 5px auto !important;
}
.atop-includes {
    position: absolute;
    left: 0;
    bottom: 79px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: bold;
}
.atop-includes {
    position: absolute;
    left: 0;
    bottom: 79px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}
.atop-secoption {
    background: transparent !important;
    border: none !important;
    display: inline !important;
    color: #333 !important;
    text-transform: capitalize !important;
    width: auto !important;
    line-height: normal !important;
}
.atop-secoption::after {
    color: #333333 !important;
}
.ato-btn-1 a {
    background: #f5292a;
    border:1px solid #f5292a;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-1 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-1 a:hover {
    background: transparent;
    border:1px solid #f5292a;
    color: #f5292a;
}
.ato-btn-1 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #f5292a;
}
.ato-btn-2 a {
    background: #f76b6c;
    border:1px solid #f76b6c;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    display: block;
    width: 200px;
    margin: 0 auto;
}
.ato-btn-2 a::after {
    content: "\f105";
    font-family: FontAwesome;
    cursor: pointer;
    margin-left: 10px;
    color: #ffffff;
    transition:all 0.5s;
}
.ato-btn-2 a:hover {
    background: transparent;
    border:1px solid #f76b6c;
    color: #f76b6c;
}
.ato-btn-2 a:hover::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 10px;
    color: #f76b6c;
}
}
.hchat, .hemail {
    color:#333333;
    text-transform:uppercase;
}
.hchat:hover, .hemail:hover {
    color:#d7090a;
    text-transform:uppercase;
}
.italic-cursive {
    font-family: 'Courgette', cursive;
}

/******* Home Subscribe section *********/
.header-sibscribe {
    margin: 0 auto;
    /*width: 100%;*/
    color: #333;
    padding: 15px;
}
.subsleft-wrapper {
    padding: 10px 10px 0;
    color: #333;
}
.subsheading {
    display: block;
    margin: 0 auto;
}
.subsheading h4 {
    width: 100%;
    display: block;
    margin-left: 0;
    font-size: 20px;
    color: #D7090A;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 17px;
    vertical-align: middle;
}
.subsheading h4 span {
    color: #333;
    text-transform: none;
    font-size: 18px;
}
.subslist {
    display: block;
    width:84%;
    margin: 0 auto;
}
.subslist li {
    padding: 0 0 0 20px;
    position: relative;
    line-height: 20px;
}
.subslist li::before {
    content: "\f00c";
    color: green;
    font-family: FontAwesome;
    cursor: pointer;
    margin-right: 10px;
    opacity: 1;
    position: absolute;
    left: 0;
    font-size: 14px;
    top: 0;
}
.vidsideimg img {
    width: 85%;
    display: block;
    margin: 0 auto;
}
.subsform {
    width: 100% !important;
    height: 130px !important;
    padding: 0;
}
.subsform iframe {
    width:97% !important;
    min-width:97% !important;
    height:auto !important;
    margin:0 auto !important;
    float:none;
    display:block;
}
.subsform .moonray-form {
    width:100% !important;
}

.etp-question {
    display: inline-block;
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    background: #eeeeee;
    position: relative;
    cursor:pointer;
}
.etpq-arrow {
    /*content: "\f107";*/
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #333;
    font-size: 18px;
    position: absolute;
    top: 35%;
    right: 10px;
    transform: rotate(0deg);
}
.etpq-arrow i {
    font-style: normal;
}
/*.etpq-current.etp-question:after {
    transform: rotate(180deg);
}*/
.etp-question p {
    margin: 0 auto;
}
.etp-answer {
    padding: 30px;
    background: #f5f5f5;
    display:none;
}
.etp-answer p {
    margin: 0 auto;
}

.accordion {
    background-color: #eee;
    box-sizing: border-box;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accactive, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accactive:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: #f5f5f5;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.panel p {
    padding: 20px 0;
    margin: 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 480px) {
    
    

    img {
        height: auto;
        max-width: 100%;
        display: block;
    }
}


@media only screen and (min-width: 960px) {
    ul.fn{
        width: 91%;
        float: left;
    }
    
    ul.fn-social{
        padding-left: 0 !important;
    }

    .fn-social-wrapper{
        float: left;
        width: 9%;
    }

    ul.fn-social li {
        display: inline-block;
        padding: 0 3px;
    }
}

@media only screen and (max-width: 959px) {
    ul.fn{
        width: 100%;
        float: none;
    }

    .fn-social-wrapper{
        float: none;
        width: 100%;
    }

    .fn-social-wrapper ul.fn-social{
        padding: 0;
    }

}