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

body
{
    /*font-family: 'Arial', sans-serif;
    font-weight: normal;*/
    
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;

    font-size: 17px;
    color:  #7c8034;
    background-color: #fffffe;
    text-align: center;
    margin: 0 auto;
}

b {
    font-weight: bold;
    color: #4a4f21;
}

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


a.textlink:visited 
{
    color: #7c8034;
}

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



a.CTAlink
{

    font-family: "Arial", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    font-size: 23px;
    background-color: #604318;
    color: #f2f2eb; 
    padding: 12px;
    text-decoration: none;
    border-radius: 0px;
    box-sizing: border-box;
    box-shadow: 0.2em 0.2em 0.2em 0 rgba(96,67,24,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.2);
}


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

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

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

.review
{
    width: 90%; 
    float: left; 
    /*font-family: 'Arial' , sans-serif;
    font-weight: lighter;*/
    
    
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: lighter;
    font-style: normal; 
    
    margin: 5%;
    padding: 8px;
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
    font-weight: normal;
    font-style: italic;
    color: #604318;
    background-color: #f2f2eb;
    border-radius: 0px;
    box-sizing: border-box;
    border: 4px solid #604318;
}

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



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


.header-main  
{
    width: 100%; 
    float: left; 
    background-color: #ffffff; 
    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: 160px; max-width: 100%; width: 100%;  position: relative; padding: 0;   margin: 0 auto; background-color: #ffffff; color: #001b23;}

.heading { height: 72%; 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: 0px;
    margin: 0px;
    box-sizing: border-box;
    display: inline;
    height: 100%; /* of header-inner */
}


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

.logo-main {  display: none; }

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


.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: #ffffff;
    font-family: "Arial", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal;
    color: #604318;
    position: relative;
    text-align: right;
    font-size: 20px;
    padding: 15px 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: 15px solid #f2f2eb;
  border-radius: 0px;*/
}

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

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

        .topnav a {
            /*display:table-cell; */
            color: #f2f2eb;
            text-align: center;
            vertical-align: middle; 
            text-decoration: none;
            font-family: "Arial", sans-serif;
            font-weight: normal;
            font-style: normal;
            font-size: 17px;
            min-width: 50px;

        }
        
        /*.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: 12.5%; 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: "Arial", sans-serif;
            font-weight: bold;
            font-style: normal;
            vertical-align: middle;
            min-width: 48px;
            background-color: transparent; /* #7c8034;*/
            margin: 0;       
            
        }

        
        .dropdown-content
            {
                display: none;
                position: absolute;
                background-color: #7c8034;
                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: #f2f2eb;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            font-family: "Arial", sans-serif;
            font-weight: 400 /*normal*/;
            font-style: normal;
            font-size: 16px;
        }
        
        .dropdown-content a img {width: 25px; height: 25px; }
        
        .topnav a:hover {
            color: #7c8034; position: relative;}
        
        .topnav .dropdown:hover .dropbtn { text-decoration: none; color: #7c8034; }
        
        .dropdown-content a:hover { /*text-decoration: underline;*/ color: #604318; }
        
        /* 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: 160px; /* Add a top margin to avoid content overlay with STATIC MENU BAR */
}


h1, h2, h3, h4  {  text-align: center; 
  font-family: "Patrick Hand", cursive;
  font-weight: normal;
  font-style: normal;
  font-size: 40px;  
  margin: 2px 16px 0px 5px; 
  color: #7c8034;  }      


.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; padding-bottom: 40px;} 
.cols2-noshadowbox
{
    width: 50%;
    float: left;
    padding: 20px 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: justify;  padding: 0px 20px 5px 20px;  }
.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 80px 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: 75%; text-align: left; }
.cols3_inner  p { vertical-align: top; text-align: left;  padding: 0px 20px 5px 20px; }
.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 20px 5px 20px;  }
.cols3_inner  li { padding: 0px 0px 8px 0px;  }
.cols3_inner  li  a { font-family: "Arial", sans-serif;
    font-weight: 400 /*bold*/;
    font-style: normal; font-size: 18px; color: #7c8034;  text-decoration: none; }  
.cols3_inner  li  a:visited {text-decoration: none; position: relative; color: #7c8034;} 
.cols3_inner  li  a:hover {text-decoration: underline; position: relative; color: #7c8034;}                           
.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: 95%;
    float: left;
    padding: 0px;
    margin: 5px 2px 30px 2px;
    box-sizing: border-box;
}

.cols1_inner  p { vertical-align: top; text-align: left;  padding: 0px 20px 5px 20px; }                           
.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: "Arial", sans-serif; font-weight: 400 /*bold*/; font-style: normal; font-size: 18px; color: #7c8034;}
                                     
.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: #7c8034;
    /*background-color: #839973;*/
    border: 3px solid #7c8034;
    font-size: 17px;
    display: inline-block;
    
}


.subs-block
{
    width: 75%;
    text-align: left;
    padding: 5px;
    font-family: "Arial" , sans-serif;
    font-size: 15px;
    color: #000000;
    border: 1px solid #7c803454;
}
.gugl-block { max-width: 90%; text-align: center; padding-top: 0px; padding-left: 5%; }

.form-inputbox { width: 250px; }
.form-button
{
    padding: 17px;
    background-color: #7c8034;
    color: #fffffc;
    font-family: "Arial", 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: #7c8034;
}

.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 #7c8034; 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: #7c8034;
    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: #7c8034;
    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: #f2f2eb;
    font-family: "Patrick Hand", cursive;
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 2;
    box-sizing: border-box;  
}

.footer-quarterbox h3   {
    text-align: left;
    vertical-align: top;
    font-family: "Patrick Hand", cursive;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    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: #604318; position: relative; }
.icon { width: 20px; height: 20px; line-height: 1;}
.footer-quarterbox 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: #604318; position: relative; }

/* RESPONSIVE CSS */


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

@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: 164px;}
    
    .nb-inner { font-size: 23px; padding: 15px 8px 1px 8px;}
    .nb-inner p { margin-top: 10px; margin-bottom: 20px; }
    
    .logo { top: 1px; padding: 0px; height: 98%; }
    .logo img { margin: 1px 0px 1px 1px; }

            .topnav { width: 100%; padding: 2px; line-height: 1.3; }
            .topnav a { font-size: 15px; }
            
            .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 5px;
        font-size: 32px; }
    
    .review { margin-top: 20px; font-size: 20px; padding: 16px;}
 
    .cols3-img img { max-width: 75%; }
     
     
    .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: 100%;
      width: 50%;
      position: absolute;
      text-align: left;
      top: 0px;
      left: 0px;
      float: left;
      bottom: auto;
    }
    
    .logo img {text-align: left; height: 100%; max-width: 100%; } 
    
    .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.1; }
    .topnav a { font-size: 14px; }
    
    .main { margin-top: 169px; }
                   
    a.CTAlink { font-size: 16px; }
    a.CTAlink:visited { font-size: 16px; }
    a.CTAlink:hover { font-size: 16px; }
    
    .usp { margin: 2% 2% 6% 6%; min-width: 51%;}
    
    h1, h2, h3, h4 { font-size: 25px;  padding: 5px 0px;}
              

    .review {margin-top: 20px;
            font-size: 18px;
            padding: 5px;}
            
    .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;}
    .cols2_inner p { text-align: left;}
    
    .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: 24px; 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 #7c8034;  }
    
    .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: 6px;
        margin-bottom: 0px;
        margin-left: 5px;
        text-align: left;
        line-height: 1.2;
        box-sizing: border-box;
        border: none;
        padding-left: 2px;
    }

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

    .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: #7c8034;
    }
              .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
        {
            width: 96%;
            margin: 40px 2% 2% 2%;
            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 15px 0px 15px; 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: 98%; margin-top: 10px; } 
    .cols3_inner p { padding: 10px 15px 0px 15px; 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 5px 20px 5px; margin: 0; border-bottom: 30px solid #ffffff;} 
    .cols1_inner p { padding: 10px 15px 0px 15px; 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: 95%;
                         margin: 20px 1.8% 5px 3%;
                        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: 20px; 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-top: 3px;} 

    .menu-banner {  top: 16px;  width: 70%; }
    
    .main { margin-top: 80px;}
    
    .usp {
        font-size: 19px;
         }
       
    .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; }

        .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: 75%; }
    
    .main { margin-top: 90px;}
     
    a.CTAlink { font-size: 25px; }
    a.CTAlink:visited { font-size: 25px; }
    a.CTAlink:hover { font-size: 25px; }

    .usp { margin: 10px 2px 10px 5px;
        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: 16px; }
    .menu-banner { width: 88%;  }  
    
}