/*   USING FONTS Arial, Arial Narrow (with Arial condensed as backup) & Tahoma.   */
html {
  scroll-padding-top: 130px;
}

body
{
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    font-size: 17px;
    color: #656D6D;
    background-color: #fffffe;
    text-align: center;
    margin: 0 auto;
}


a.textlink
{
    color: #004559;
    text-decoration: underline;
    background-color:transparent;
}


a.textlink:visited 
{
    color: #004559;
}

a.textlink:hover 
{
    color: #cc4d51;
}



a.CTAlink
{

    font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    font-size: 23px;
    background-color: #004559;
    color: #ffffff; 
    padding: 12px;
    text-decoration: none;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0.2em 0.2em 0.2em 0 rgba(204,77,81,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.2);
   
}


a.CTAlink:visited 
{
    background-color: #004559;
}

a.CTAlink:hover 
{
    background-color: #cc4d51;
}

.usp
{
    display: block;
    color: #000000;
    width: auto;
    float: left;
    font-size: 19px;
    padding: 8px;
    margin: 5px 20% 5px 30%;
    text-align: left;
    box-sizing: border-box;
    border-left: 5px solid #cc4d51;
    border-radius: 7px;
}

.review
{
    width: 90%; 
    float: left; 
    font-family: 'Arial' , sans-serif;
    font-weight: lighter;
    margin: 5%;
    padding: 8px;
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
    font-weight: normal;
    font-style: italic;
    color: #555;
    border-radius: 20px;
    box-sizing: border-box;
    border-right: 4px solid #cc4d51;
    border-left: 4px solid #cc4d51;
}



.validator
{
    height: 31px;
    width: 88px;
}



/* HEADER CSS */
.container { max-width: 1920px;        margin: 0 auto;        width: 100%;    }


.header-main  
{
    width: 100%; 
    float: left; 
    background-color: #cc4d51; 
    position: fixed; 
    margin-top: 0px;
    top: 0; 
    left: 0;
    box-sizing: border-box;
    z-index: 9999;   
  }


.header-container {  max-width: 1920px; padding: 0;  margin: 0 auto; }
                          
                          
.header-inner { height: 135px; max-width: 100%; width: 100%;  position: relative; padding: 0;   margin: 0 auto; background-color: #001b23; color: #ffffff;}

.heading { height: 78%; width: 100%; float: right; position: relative;  }
 
.logo
{
    position: absolute;
    /*left: 10px;
    top: 3px;*/
    top: 0px;
    left: 0px;
    width: 35%;
    text-align: left;
    float: left;
    padding: 5px;
    margin: 0px;
    box-sizing: border-box;
    display: inline;
    height: 108px; /* 80% of header-inner */
}


.logo img {
  max-height: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0px;
}

.logo-main {  display: none; }

.logo-main img { max-width: 26%; text-align: center; margin: 0px;}


.header-inner .icons
{
    position: absolute;
    right: 17px;
    max-width: 30%;
    text-align: right;
    float: right;
    padding: 10px 16px 5px 16px;
}


.nb-inner
{
    width: 60%;
    float: right;
    /*max-height: 200px;*/
    background-color: #001b23;
    font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    color: #ffffff;
    position: relative;
    text-align: right;
    font-size: 25px;
    padding: 0px 8px 1px 8px;
    border-bottom:  none;
}

.nb-inner p {
  margin-top: 10px;
  margin-bottom: 8px;
  margin-right: 5px;
  padding-right: 10px;
  box-sizing: border-box;
  border-right: 5px solid #cc4d51;
  border-radius: 7px;
}

.nb-inner br { display: none; } 
                       
.menu-banner
{
    position: relative;
    height: 22%;
    right: 0px;
    width: 100%;
    float: right;
    text-align: center;
    background-color: #004559;
}

  
        .topnav
            {
                width: 100%;
                margin: 0 auto; /* display: table; */
                text-align: center;
                vertical-align: middle;
                overflow: hidden;
                background-color: #004559;
                height: 100%;
                line-height: 1.1;
            }

        .topnav a {
            /*display:table-cell; */
            color: #ffffff;
            text-align: center;
            vertical-align: middle; 
            text-decoration: none;
            font-family: "Pathway Gothic One", sans-serif;
            font-weight: 400 /*bold normal*/;
            font-style: normal;
            font-size: 25px;
            min-width: 48px;

        }
        
        .topnav a br { display: none; } 
        
        .topnav a img {width: 25px; height: 25px; }
        
        /* Hide the link that should open and close the topnav on small screens */
        .topnav .icon {
            display: none;
        }

        
        .dropdown { float: left; overflow: hidden; width: 14.28%; text-align: center; }
        
        /* Style the dropdown button to fit inside the topnav */
        .dropdown .dropbtn {
            font-size: 17px; 
            border: none;
            outline: none;
            color: #231f20;
            text-align: center;
            /*padding: 0px 25px;*/ 
            text-decoration: none;
            font-family: "Pathway Gothic One", sans-serif;
            font-weight: 400 /*bold*/;
            font-style: normal;
            vertical-align: middle;
            min-width: 48px;
            background-color: transparent; /* #004559;*/
            margin: 0;       
            
        }

        
        .dropdown-content
            {
                display: none;
                position: absolute;
                background-color: #666666;
                min-width: 250px;
                box-shadow: 0px 17px 20px 0px rgba(0,0,0,0.6);
                z-index: 999999999;
                margin-top: 0px; /* Important else dropdown-menu disappears when you move mouse/focus onto it I think it needs to slightly overlap topnav */
            }
        
        .dropdown-content a {
            float: none;
            color: #fffffc;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            font-family: "Pathway Gothic One", sans-serif;
            font-weight: 400 /*normal*/;
            font-style: normal;
            font-size: 17px;
        }
        
        .dropdown-content a img {width: 35px; height: 35px; }
        
        .topnav a:hover {
            color: #cc4d51; position: relative;}
        
        .topnav .dropdown:hover .dropbtn { text-decoration: none; color: #004559; }
        
        .dropdown-content a:hover { /*text-decoration: underline;*/ color: #cccccc; }
        
        /* Show the dropdown menu when the user moves the mouse over the dropdown button */
        .dropdown:hover .dropdown-content {
            display: block;
        }


/* header css end*/





/* BODY CSS */

.main { width: 100%; float: left; padding: 0; margin: 0 auto; 
    margin-top: 130px; /* Add a top margin to avoid content overlay with STATIC MENU BAR */
}


h1, h2, h3, h4  {  text-align: center; font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal; font-size: 35px;  margin: 12px 16px 0px 5px; color: #004559;  }      


.hero-container { max-width: 1920px;        margin: 0 auto;        width: 100%;    }

.hero-inner .hero-image img { max-width: 100%; text-align: center; 
    border-radius: 0px;
    box-sizing: border-box;
}
    
    
.hero-inner{  width: 100%; float: left; }
.hero-image
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    text-align: center;
    float: left;
    padding: 0;
    line-height: 1;
}
.hero-image img { max-width: 100%; text-align: center; }

                                  

.cols2-main{ width: 100%; float: left; padding: 0; }

 
.cols2_inner{  width: 100%;float: left; background: #fff; text-align: center;} 
.cols2-noshadowbox
{
    width: 50%;
    float: left;
    padding: 30px 2px 30px 2px;
    margin: 0;
    box-sizing: border-box;
}


.cols2-img { width: 100%; float: left; text-align: center; padding: 0; margin: 0px 0px 20px 0px; font-size: 0px;}

.cols2-img img { max-width: 100%; text-align: center; }

.cols2_inner  p { vertical-align: top; text-align: left;  padding: 0px 5% 5px 5%;  }
.cols2_inner  ul { vertical-align: top; text-align: left;  margin: 0px 0px 0px 16px; padding: 0px 5% 5px 5%; list-style: none; line-height: 1.1; }
.cols2_inner  ol { vertical-align: top; text-align: left;  margin: 0px 0px 0px 16px; padding: 5px 5% 5px 5%; line-height: 1.1; }
.cols2_inner ul li { list-style-type: disc; padding: 0px 0px 8px 0px; }
.cols2_inner ol li { padding: 0px 0px 20px 0px; }
.cols2_inner ol li::marker { color: #ce4b50; }
/*.cols2_inner  li::before {content: "\25CF"; color: #001b23; font-size: inherit; display: inline-block; width: 1em;  margin-left: -1em}*/
/*content: url('images/security.jpg');*/
.cols2_inner ul li li { list-style-type: circle; /* Options: circle, disc, square, none */}

.cols3-main { width: 100%; float: left; padding: 0; }
.cols3_inner {  width: 100%;float: left; background: #fff; text-align: left;}  
.cols3-noshadowbox
{
    width: 33.3%;
    float: left;
    padding: 30px 2px 60px 2px;
    margin: 0;
    box-sizing: border-box;
}
.cols3-img
{
    width: 100%;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0px 0px 20px 0px;
    font-size: 0px;
}
.cols3-img img { max-width: 38%; text-align: left; }
.cols3_inner  p { vertical-align: top; text-align: left;  padding: 0px 5% 5px 5%; }
.cols3_inner  ol { vertical-align: top; text-align: left; margin: 0; padding: 0 16px 10px 20px;}
.cols3_inner  ul { vertical-align: top; text-align: left;  margin: 0px 0px 0px 16px; padding: 0px 5% 5px 5%;  }
.cols3_inner  li { padding: 0px 0px 8px 0px;  }
.cols3_inner  li  a { font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal; font-size: 18px; color: #004559;  text-decoration: none; }  
.cols3_inner  li  a:visited {text-decoration: none; position: relative; color: #004559;} 
.cols3_inner  li  a:hover {text-decoration: underline; position: relative; color: #004559;}                           
.cols3_inner  b { font-weight: bolder; }

.cols4-main { width: 100%; float: left; padding: 0; }
.cols4_inner {  width: 100%;float: left; background: #fff; text-align: left;}  
.cols4-noshadowbox
{
    width: 25%;
    float: left;
    padding: 30px 2px 30px 2px;
    margin: 0;
    box-sizing: border-box;
}
.cols4-img
{
    width: 100%;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0px 0px 20px 0px;
    font-size: 0px;
}
.cols4-img img { max-width: 100%; text-align: center; }


.cols1-main { width: 100%; float: left; padding: 0; }

.cols1_inner {  width: 100%;float: left; background: #fff; text-align: left; }  
.cols1-noshadowbox
{
    width: 80%;
    float: left;
    padding: 0px;
    margin: 5px 10% 30px 10%;
    box-sizing: border-box;
}

.cols1_inner  p { vertical-align: top; text-align: center;  padding: 0px; }                           
.cols1_inner  b { font-weight: bolder; }

.cols75-25-main{ width: 100%; float: left; padding: 0; }

.cols75-25_inner{  width: 100%;float: left; background: #fff; text-align: center; }
 
.cols75-25-widebox
{
    width: 78%;
    float: left;
    padding: 25px 10px 5px 10px;
    margin: 0px;
    box-sizing: border-box;
}
.cols75-25-narrowbox
{
    width: 9%;
    float: left;
    padding: 0 5px 0px 5px;
    margin: 0 5px 0px 5px; 
    box-sizing: border-box;

}



.cols75-25-img { width: 100%; float: left; text-align: center; padding-top: 16px;}
.cols75-25-img img { max-width: 100%; text-align: center; }
.cols75-25_inner p { vertical-align: top; text-align: justify;  padding: 0px 0px 5px 0px; }

.cols75-25-narrowroundcornerbox p
{
    text-align: right;
    vertical-align: middle;
    padding: 8px;
    margin: 0;
    font-family: 'Lato' , sans-serif;
    font-weight: normal;
    font-size: 18px;
    color: #333333;
}

.cols75-25-narrowroundcornerbox .p2 {  text-align: right;  vertical-align: middle; padding: 8px; margin: 0; 
                                     font-family: "Pathway Gothic One", sans-serif; font-weight: 400 /*bold*/; font-style: normal; font-size: 18px; color: #004559;}
                                     
.cols75-25_inner ul { vertical-align: top; text-align: left;  margin: 0; padding: 0 10px 10px 20px;}
.cols75-25_inner ol { vertical-align: top; text-align: left; margin: 0; padding: 0 10px 10px 20px;}
.cols75-25_inner li { padding: 0px 0px 8px 0px; }
.cols75-25_inner b { font-weight: bold; }

.subs
{
    width: 98%;
    max-width: 450px;
    text-align: center;
    vertical-align: top;
    padding-top: 0px;
    padding-left: 10px;
    border-collapse: separate;
    border-spacing: 3px 12px;
    color: #004559;
    /*background-color: #839973;*/
    border: 3px solid #004559;
    font-size: 17px;
    display: inline-block;
    
}


.subs-block
{
    width: 75%;
    text-align: left;
    padding-top: 0px;
    font-family: "Arial" , sans-serif;
    font-size: 17px;
    color: #C0C0C0;
}
.gugl-block { max-width: 90%; text-align: center; padding-top: 0px; padding-left: 5%; }

.form-inputbox { width: 250px; }
.form-button
{
    padding: 17px;
    background-color: #004559;
    color: #fffffc;
    font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    font-size: 23px;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0.2em 0.2em 0.2em 0 rgba(35,31,32,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.2);
}


.form-button:visited 
{
    background-color: #004559;
}

.form-button:hover 
{
    background-color: #231f20;
}

.label-reqd { display: none; }

.fb-page { margin: 0px; padding: 10px; text-align: center;}

.fb-footer { margin: 0; padding: 10px; background-color: #fffffc; border:  3px solid #004559; border-radius: 5px;
                                box-shadow: 0 8px 10px 0 rgba(0,0,0,.14),0 4px 12px 0 rgba(0,0,0,.12), 8px 4px 6px -1px rgba(0,0,0,.2);}


.p-right { vertical-align: top; text-align: right;  padding: 0px 0px 50px 0px; }
.p-left { text-align: left; padding-bottom: 25px;}
.p-center { text-align: center; padding: 20px 0px 30px 0px;}


.highlighted 
{
    padding: 10px;
    background-color: #004559;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}





/* FOOTER CSS */

.footer-main
{
    background: #004559;
    width: 100%;
    float: left;
    padding: 0;
    margin-top: 10px;
}
                        
.footer_inner
{
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 2px;
}  

 
.footer-quarterbox
{
    width: 24%; 
    float: left;
    padding: 3px;
    padding: 5px;
    margin: 10px 0.3% 5px 0.7%;
    text-align: left;
    color: #fffffc;
    font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    font-size: 20px;
    line-height: 2;
    box-sizing: border-box;  
}

.footer-quarterbox h3   {
    text-align: left;
    vertical-align: top;
    font-family: "Pathway Gothic One", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    font-weight: bold;
    font-style:  normal;
    color: #fffffc;
    margin-bottom: 16px;
    
}


.footer-quarterbox p { vertical-align: top; text-align: left;  padding: 0; text-decoration: none;}
.footer-quarterbox b { text-align: center; font-weight: bold; }
.footer-quarterbox a { padding: 0px 0px 0px 0px; font-weight: normal; text-decoration: none; text-align: left; min-width: 48px; color: #fffffc;}
.footer-quarterbox a:hover {color: #cc4d51; position: relative; }
.icon { width: 20px; height: 20px; line-height: 1;}
a.heart img { max-width: 100%;}

.copyright { text-align: center; font-family: 'Arial', sans-serif; font-size: 18px; min-width: 52%; line-height: 3; color: #fffffc;}
.copyright p  { text-align: center; color: #fffffc; }
.copyright a { text-align: center; text-decoration: none; color: #fffffc; }
.copyright a:hover {color: #cc4d51; position: relative; }

/* RESPONSIVE CSS */


@media screen and (max-width:1920px){
    html {scroll-padding-top: 145px; }
    .topnav { line-height: 1.1; }
    .header-container { max-width: 100%;   width: 100%; }
    .hero-container {  max-width: 100%;  width: 100%; }
    .header-inner { height: 145px; }
    .container {  max-width: 100%; width: 100%; }
    .logo { height: 110px; }
    /*.logo img { max-width: 29%; }*/
    .main { margin-top: 145px;}
    
}
}
@media screen and (max-width:1536px)
{
    html {scroll-padding-top: 155px; }
    .header-inner { height: 155px;  }
    .logo { height: 124px; }
    /*.logo img { max-width: 38%; }*/
    .main { margin-top: 155px;}
}

@media screen and (max-width:1280px){
    html {scroll-padding-top: 160px; }
    .header-inner { height: 160px;  }
    .heading { height: 70%; }
    .menu-banner { height: 30%; line-height: 1;}
    .main { margin-top: 160px;}
    
    .nb-inner { font-size: 23px; padding: 15px 8px 1px 8px;}
    .nb-inner p { margin-top: 10px; margin-bottom: 20px; }
    
    .logo { top: 1px; padding: 0px; margin: 0px; height: 97%; }
    .logo img { margin: 0px; }

            .topnav { width: 100%; padding: 2px; line-height: 1; }
            .topnav a { font-size: 24px; }
            
            .topnav a br { display: inline; } 
            
            .dropdown .dropbtn { font-size: 16px; }
     
    a.CTAlink { font-size: 23px; }
    a.CTAlink:visited { font-size: 23px; }
    a.CTAlink:hover { font-size: 23px; }

    .usp { margin: 8px 12% 15px 15%; }
        
        
    h1, h2, h3, h4 { padding: 5px 8px; font-size: 33px; }  
    
    .review { margin-top: 40px; font-size: 20px; padding: 16px;}
 
    .cols3-img img { max-width: 45%; }
     
     
    .cols75-25-widebox {  margin-top: 16px; padding-top: 20px; width: 84%;} 
    .cols75-25-narrowbox {  margin-top: 19px; width: 7%;}  
    .cols75-25-narrowroundcornerbox p { font-size: 17px; }
    .cols75-25-narrowroundcornerbox .p2 { font-size: 17px; }
        
    .footer-quarterbox { line-height: 1.8; font-size: 20px; }
    .footer-quarterbox h3  { font-size: 25px; }
    .icon { width: 14px; height: 14px; }
    
    .copyright { font-size: 14px; }
    .copyright p  { font-size: 14px; }
    .copyright a { font-size: 14px; }
    
    .form-inputbox { width: 220px; } 
}


@media screen and (max-width:991px){
    html {scroll-padding-top: 165px; }
    body
    {
        font-size: 16px;
        line-height: 1.4; 
        text-align: left;
    }
    .container { width: 100%; }
    
    .header-inner { height: 165px; width: 100%; margin: 0 auto; }
    .heading { height: 75%; }
   
    
    .logo {
      height: auto;
      width: 50%;
      position: absolute;
      text-align: left;
      top: 0px;
      left: 0px;
      float: left;
      bottom: auto;
    }
    
    .logo img {text-align: left; height: 99%; max-width: 99%; /*max-width: 85%;*/ margin: 1%;} 
    
    .nb-inner { font-size: 19px;  width: 66%; margin: 0 auto; }
    
    .heading h1 { font-size: 30px; font-weight:  normal; }
    
    .menu-banner { width: 100%; background-color: transparent; height: 25%; }
    .topnav { line-height: 1; }
    .topnav a { font-size: 16px; }
    
    .main { margin-top: 165px; }
                   
    a.CTAlink { font-size: 16px; }
    a.CTAlink:visited { font-size: 16px; }
    a.CTAlink:hover { font-size: 16px; }
    
    .usp { margin: 2% 4% 3% 12%; min-width: 51%;}
    
    h1, h2, h3, h4 { font-size: 27px;  padding: 7px 0px;}
              

    .review { margin-top: 35px; font-size: 22px; padding: 7px; }
 
    .cols2-img img{   text-align: center; width: 98%; height: 98%;}    
    .cols2_inner ul li {padding: 5px 2px 5px 2px; }
    .cols2_inner ol li { padding: 4px 2px 20px 2px;}
    .cols2_inner table.subs  { font-size:13px;}
    
    .cols3-img img{   text-align: center; width: 49%; max-width: 52%;}  
    .cols3_inner table.subs  { font-size:13px;}
    
    .cols4-img img{   text-align: center; width: 99%;}  

    
    .cols75-25-widebox { margin-top: 0px; width: 88%; }  
    .cols75-25-narrowbox { margin-top: 0px; width: 5%;} 
    .cols75-25-img img{   text-align: center; width: 99%;}  
    .cols75-25_inner p {   text-align: left; }
    .cols75-25-narrowroundcornerbox { padding: 0 5px 0px 5px; margin: 5px 0.1% 13px 0.5%; }
    .cols75-25-narrowroundcornerbox p { font-size: 16px; }
    .cols75-25-narrowroundcornerbox .p2 { font-size: 16px; }

    .footer-quarterbox
    {
    width: 49%; /* 4 blocks to split into 2 groups of 2 */
    margin: 16px 0.3% 5px 0.7%;
    line-height: 2;
    font-size: 17px;
    }
    .footer-quarterbox h3  { font-size: 20px; }
    .footer-quarterbox a { min-width: 48px;}  
    
    .copyright { font-size: 16px; }
    .copyright p  { font-size: 16px; }
    .copyright a { font-size: 16px; }
    
    .icon { width: 18px; height: 18px; }
    .icon img { width: 18px; height: 18px; }
    a.heart img { text-align: center; width: 99%; }
    
    
    .subs  { width: 98%; text-align: left; vertical-align: top; padding: 5px; border-collapse: separate; border-spacing: 3px 8px; 
                               font-size:13px;}
    .subs-block { width: 90%; text-align: left; padding: 0; font-size:13px; }
    .gugl-block { width: 99%; text-align: left; overflow-x: hidden;}
}



/* This is to stop the hover effect over menu when user is on a touch-screen, to avoid confusion, esp when both topnav and dropdown are usually clickable */
@media screen and (min-width:768px) and (hover: none) {
  .topnav .dropdown .dropdown-content { display: none; }  
  
}

@media screen and (min-width:768px) and (any-hover: on-demand) {
  .topnav .dropdown .dropdown-content { display: none; }
}



@media screen and (max-width:767px){   /* Hamburger Menu enters */
    html {scroll-padding-top: 65px; }                        
    body
    {
        font-size: 20px;
        line-height: 1.5; 
        text-align: left;
    }
    .container { width: 100%; }
    
    .review { width: 100%; }
    
    .usp { margin: 3%; font-size: 18px; font-weight: bold; min-width: 51%;}
    
    .header-main { line-height: 1; height: 65px; }
    .header-inner { height: 65px; width: 100%; margin: 0 auto; border-bottom: 2px solid #004559;  }
    
    .heading { height: 100%; width: 55%; top: 0px; float: left; text-align: center; }
    
    h1, h2, h3, h4 { width: 95%; font-size: 36px; line-height: 1.5; text-align: center; padding: 1px 5px 1px 5px; margin: 0; }
    
    
    .nb-inner { width: 95%; position: relative;  text-align: left; margin: 0 auto; padding: 0px 8px 1px 1px; font-size: 18px; }
    
    .nb-inner p {
        margin-top: 8px;
        margin-bottom: 0px;
        margin-left: 5px;
        text-align: left;
        line-height: 1.2;
        box-sizing: border-box;
        border-left: 5px solid #cc4d51;
        border-right: none;
        border-radius: 7px;
        padding-left: 10px;
    }

    
    .nb-inner br { display: block; } 
        
    .logo {  display: none;}
    .logo img {text-align: left; height: 33%; width: 33%; max-width: 33%; margin: 2px;} 
    
    .logo-main
    {
        width: 100%; position: relative;  text-align: center;  top: 0px;  float: left;  line-height: 1;  bottom: auto; display: block;
    }
    
    .logo-main img {text-align: left; height: 40%; width: 40%; max-width: 35%; margin: 2px;} 

    .menu-banner { position: absolute; top: 16px;  width: 50%; height: auto;}
    
    
    .main { margin-top: 65px; padding: 0;}
    
                  
    .container { width: 100%; margin: 0 auto;}

         
    a.CTAlink { font-size: 28px; }
    a.CTAlink:visited { font-size: 28px; }
    a.CTAlink:hover { font-size: 28px; }
    
    .p-left { text-align: center; padding-top: 0px; padding-bottom: 0px;}
    
            .topnav {max-width: 100%; background-color:  transparent;  height: auto; /*margin-right: 80px;*/}
            
            /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
              .topnav a:not(:first-child),           
              .dropdown .dropbtn {
                display: none;
              }
              
              .topnav a { font-size: 20px; line-height: 2; padding: 5px 7px 5px 7px; color: #fffffc; }
                          
              .topnav a br {display: None;}
              
              .topnav a.icon {
                float: right;
                display: block;
              }

            /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens 
            (display the links vertically instead of horizontally) */
            
              .topnav.responsive {position: relative; right: 8px; width: 100%; top: 22px;}
              .topnav.responsive a.icon {
                position: absolute;
                right: 0;
                top: 0;
              }
              .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
              }
              .topnav.responsive .dropdown
    {
        float: none;
        width: auto;
        background: #004559;
    }
              .topnav.responsive .dropdown-content { display: none; position: relative;}
              .topnav.responsive .dropdown .dropbtn {
                display: block;
                width: 100%;
                text-align: left;
                min-width: 355px;
                padding: 0px 2px;
              }
      

    .review
        {
            margin: 0;
            padding: 5px;
            font-size: 20px;
        }
    
    .hero-inner { text-align: center; padding: 0px 0px 0px 0px;}
    .hero-image img { width: 100%; }    
 
    .cols2-main { padding: 0;} 
    .cols2_inner { padding: 0;}
    .cols2-noshadowbox { width: 100%;  padding: 0px 5px 20px 5px; margin: 0; border-bottom: 30px solid #ffffff;}
    .cols2_inner p { padding: 10px 3px 0px 5px; margin: 0;}
    .cols2-img img{ width: 100%; height: 100%;}
    .cols2_inner table.subs  { font-size:15px;}
    
    .cols3_inner table.subs  { font-size:15px;} 
    .cols3-main { padding: 0;} 
    .cols3_inner { padding: 0px 0px 0px 0px;} 
    .cols3-noshadowbox { width: 100%;  padding: 0px 5px 45px 5px; margin: 0; border-bottom: 30px solid #ffffff;} 
    .cols3-img img { width: 100%; max-width: 70%; margin-top: 10px; } 
    .cols3_inner p { padding: 10px 3px 0px 5px; margin: 0;}
      
    .cols4-main { padding: 0;} 
    .cols4_inner { padding: 0px 0px 0px 0px;} 
    .cols4-noshadowbox { width: 100%;  padding: 0px 5px 20px 5px; margin: 0; border-bottom: 30px solid #ffffff;} 
    .cols4-img img { margin-top: 10px; } 
    
       
    .cols1-main { padding: 0;} 
    .cols1_inner { padding: 0px;} 
    .cols1-noshadowbox { width: 100%;  padding: 5px 0px 20px 0px; margin: 0; border-bottom: 30px solid #ffffff;} 
    .cols1_inner p { padding: 10px 3px 0px 5px; margin: 0;}
 
    .cols75-25-main{ padding: 0; }
    .cols75-25_inner { padding: 5px 0px 0px 0px;}
    .cols75-25-widebox { width: 98%;  padding: 0px 8px 5px 5px; margin: 0px 2% 10px 2%;}  

    .cols75-25-narrowbox { width: 98%;  padding: 0px 5px 5px 5px; margin-top: 0px;} 
    .cols75-25-narrowroundcornerbox { padding: 0 5px 0px 5px; margin: 5px 12% 10px 12%; }
    .cols75-25-narrowroundcornerbox p { font-size: 23px; padding: 0; }
    .cols75-25-narrowroundcornerbox .p2 { font-size: 23px; padding: 0; }
    .cols75-25_inner p { padding: 10px 3px 0px 5px; margin: 0;}

    .footer-main { padding: 0; }
   
    .footer-quarterbox {width: 99%; 
                        margin: 20px 0.3% 5px 0.7%;
                        line-height: 1.8; 
                        font-size: 24px; }
                        
    .footer-quarterbox h3 { line-height: 1; font-size: 30px; margin: 10px 0px 16px 0px; }
    .footer-quarterbox a  { min-width: 48px; } 
    .icon { width: 25px; height: 25px; }
    .icon img  { width: 19px; height: 19px; }
    
    .copyright { font-size: 16px; }
    .copyright p  { font-size: 16px; }
    .copyright a { font-size: 16px; }

    .subs  { width: 91%; text-align: left; vertical-align: top; padding: 5px 16px 5px 16px; border-collapse: separate; border-spacing: 3px 12px; 
                               font-size:15px; margin-top: 16px;}
    .subs-block { width: 90%; text-align: left; padding: 8px; font-size:15px; line-height: 1.2; }
    .gugl-block { max-width: 98%; text-align: left; padding-left: 2px; overflow-x: hidden;}

}


@media screen and (max-width:480px)
{   html {scroll-padding-top: 80px; } 
    body
    {
        font-size: 20px;
        line-height: 1.6; 
        text-align: left;
    }
        
        .topnav {margin-top: 0px;  }
        .topnav a {font-size: 18px; line-height: 2.5; }

        .topnav.responsive .dropdown .dropbtn {  min-width: 290px; }
   
        .topnav.responsive a {font-size: 27px; line-height: 2; }
    
    .header-main { height: 80px; }
    
    .header-inner { width: 100%; height: 80px; margin: 0 auto; }
    
    .heading { width: 70%; }
    
    .heading h1 { width: 95%; font-size: 17px; line-height: 1.1; text-align: center; padding: 1px; margin: 0; }
        
    .logo-main img {text-align: left; margin: 4px;} 

    .menu-banner {  top: 16px;  width: 60%; }
    
    .main { margin-top: 80px;}
    
    .cols2_inner ul { margin: 16px 0px 10px 8px;}
    .cols2_inner ol { margin: 16px 0px 10px 8px;} 
    .cols2_inner ul li { padding: 0; line-height: 1.2; text-align: left; margin: 0px 0px 10px 0px;}
    .cols2_inner ol li { padding: 0; line-height: 1.2; text-align: left; margin: 0px 0px 10px 0px; padding: 0px 0px 24px 0px;}
             
}
 
    
@media screen and (max-width:360px)
{    
    html {scroll-padding-top: 90px; }
    body
    {
        font-size: 20px;
        line-height: 1.6; 
        text-align: left;
    }
        
        .topnav {margin-top: 0px; /*min-width: 200px; max-width: 98%; margin-right: 20px;*/ }
        .topnav a {font-size: 18px; line-height: 2.5; }

        .topnav.responsive .dropdown .dropbtn {  min-width: 290px; }
   
        .topnav.responsive a {font-size: 20px; line-height: 2; }
    
    .header-main { height: 90px; }
    
    .header-inner { width: 100%; height: 90px; margin: 0 auto; }
    
    .heading { width: 70%; top: 0px; float: left; text-align: center; }
    
    .heading h1 { width: 95%; font-size: 16px; line-height: 1.1; text-align: center; padding: 1px; margin: 0; }
    
    .nb-inner { width: 99%; position: relative;  text-align: center; margin: 0 auto; padding: 0; }
        
    .logo-main img {text-align: left; } 

    .menu-banner {  top: 16px;  width: 60%; }
    
    .main { margin-top: 90px;}
     
    a.CTAlink { font-size: 25px; }
    a.CTAlink:visited { font-size: 25px; }
    a.CTAlink:hover { font-size: 25px; }

    .usp { margin: 10px 10px 10px 20px; font-size: 18px;}
    
    h1, h2, h3, h4 { width: 96%;  font-size: 36px;  line-height: 1; }
    
    
    .cols2_inner li::before { width: 1em;  } 

    
    .cols3_inner ul { text-align: left; padding: 0; width: 99%;} 
    .cols3_inner ul li { padding: 8px 2px 8px 2px; } 
    .cols3_inner ul li a { font-size: 16px; text-transform: uppercase; text-align: center; padding: 5px 2px 5px 2px; }
    
    .cols1-noshadowbox { border-bottom: 16px solid #ffffff;}   

    .cols75-25-narrowroundcornerbox { padding: 16px 5px 5px 5px; margin: 0; }
    .cols75-25-narrowroundcornerbox p { font-size: 20px; }
    .cols75-25-narrowroundcornerbox .p2 { font-size: 20px; }
    
    .footer-quarterbox
    { width: 93%; /* there are 4 blocks to show one underneath the other */  
      margin: 20px 3% 5px 4%;
      padding: 2px;  
      margin: 20px 3% 5px 4%;
      padding: 2px; 
    }
    
    .footer-quarterbox h3 { line-height: 1; font-size: 25px; margin: 10px 0px 16px 0px; }
    
    .form-inputbox { width: 220px; }   
    .form-button { margin: 10px; font-size: 17px;  }

}

@media screen and (max-width:281px)
{    
    .nb-inner { font-size: 18px; }
    .menu-banner { width: 65%;  }  
    
}