/*   USING FONTS Arial, Sans Open Condensed.   
Green: #a8cf45; Purple: #594390; Text: #808080; */
body
{
    font-family: "Arial" , sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #808080;
    background-color: #fffffc;
    text-align: center;
    margin: 0 auto;
}

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

a.textlink:visited 
{
    color: #a8cf45;
    text-decoration: underline;
}

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


    
a.CTAlink
{
    font-family: 'BenchNine', sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight:  bold;
    background-color: #a8cf45;
    color: #000000;
    padding: 1px 20px 3px 20px;
    text-decoration: none;
    border-radius: 0px;
    box-sizing: border-box;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.5),0 1px 10px 0 rgba(0,0,0,.5),0 2px 4px -1px rgba(0,0,0,.3); 
}

a.CTAlink:visited 
{
    color: #000000;
}

a.CTAlink:hover 
{
    color: #ffffff;
}

    
a.CTAlink2
{
    font-family: "Arial" , sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight:  normal;
    background-color: #a8cf45;
    color: #000000;
    padding: 4px;
    text-decoration: none;
    border-radius: 0px;
    box-sizing: border-box; 
}

a.CTAlink2:visited 
{
    color: #000000;
}

a.CTAlink2:hover 
{
    color: #ffffff;
}

.review
{
    margin: 25px 12% 20px 12%;
    padding: 0px 2% 0px 1%;
    text-align: center;
    font-size: 23px;
    line-height: 1.1;
    font-family: 'BenchNine', sans-serif;
    font-weight: normal;
    font-style: italic;
    color: #000000;
    border-left: 3px solid #a8cf45; 
    border-right: 3px solid #00afef; 
    border-radius: 0px;
}

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

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


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


.header-container {   width: 100%; padding: 0; margin: 0 auto; }
                          
                          
.header-inner { max-width: 1280px; width: 100%;  height: 130px; position: relative; padding: 0;   margin: 0 auto; }

 
.logo
{
    position: absolute;
    left: 0px;
    top: 6px;
    width: 26%;
    text-align: left;
    float: left;
    padding: 1px;
}

.logo img
{
    max-width: 100%; }
                       
.menu-banner { position: relative; top: 5px; right: 10px; width: 70%; float: right;  background-color:  transparent }

.heading { width: 100%; top: 0px; float: right; }
    
.heading h1 { font-family: 'BenchNine', sans-serif; text-align: right; margin: 0px 10px 3px 0px; font-size: 28px;font-style: normal; font-weight: normal; color: #a8cf45;}
        

        .topnav { width: 100%; margin-top: -28px;  float: right; text-align: center; overflow: hidden; }

        .topnav a {
            display: block;
            color: #ffffff;
            text-align: center;
            padding-top: 10px;
            text-decoration: none;
            font-family: 'BenchNine', sans-serif;
            font-size: 18px;
            line-height: 1.3;
            font-weight:  normal;
            vertical-align: middle;
            min-width: 48px;
        }
            
        .topnav a img {width: 35px; height: 35px; }
        
        /* Hide the link that should open and close the topnav on small screens */
        .topnav .icon {
            display: none;
        }

        
        .dropdown { float: left; overflow: hidden; width: 20%; text-align: center; }
        
        /* Style the dropdown button to fit inside the topnav */
        .dropdown .dropbtn {
            font-size: 18px; 
            border: none;
            outline: none;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            font-family: 'BenchNine', sans-serif;
            font-weight:  normal;
            vertical-align: middle;
            min-width: 48px;
            background-color: #808080;
            margin: 0;       
            
        }   
        
        .dropdown-content
            {
                display: none;
                position: absolute;
                background-color: #00afef;
                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: #ffffff;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            font-family: 'BenchNine', sans-serif;
            font-size: 18px;
            font-weight: normal;
        }
        
        
        .dropdown-content a img {width: 25px; height: 25px; }
        
        .topnav a:hover {
            text-decoration: underline; color: #00afef; position: relative;}
        
        .topnav .dropdown:hover .dropbtn { text-decoration: underline; color: #00afef; }
        
        .dropdown-content a:hover { text-decoration: underline; color: #808080; }
        
        /* 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 */
}

.hero-inner{  width: 100%; float: left; }
.hero-image
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    text-align: center;
    float: left;
    padding: 0;
}
.hero-image 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-nobox
{
    width: 100%;
    float: left;
    padding: 0 1% 0px 1%;
    margin: 5px 0px 30px 0px;
    box-sizing: border-box;
}

.cols1-img { width: 100%; float: left; text-align: center; padding-top: 5px;}
.cols1-img img { max-width: 100%; text-align: center; }
.cols1_inner h2{ vertical-align: top; text-align: center; font-family: 'BenchNine', sans-serif; font-weight:  normal; font-size: 30px; line-height: 0.8; 
                 font-style:  normal; color: #00afef;}  
.cols1_inner h3
{
    text-align: left;
    line-height: 1;
    font-family: 'BenchNine', sans-serif; 
    font-weight: normal;
    font-size: 24px;
    font-style: italic;
    color: #00afef;
    margin-top: 30px;
}
.cols1_inner  p { vertical-align: top; text-align: left;  padding: 0px 0px 0px 0px; }
.cols1_inner  ul { vertical-align: top; text-align: left;  margin: 0; padding: 15px 10px 10px 20px; }
.cols1_inner  ol { vertical-align: top; text-align: left; font-family: 'BenchNine', sans-serif;  margin: 0; padding: 0 10px 10px 20px;}
.cols1_inner  li { padding: 0px 0px 8px 0px; }
.cols1_inner  b { font-weight: bold; color: #555555;}


.green-block {  width: 100%; background-color: #a8cf45; color: #ffffff; padding: 30px; margin-top: 0px;
                font-family: 'BenchNine', sans-serif; font-size: 20px;  
                border-radius: 7px;
                box-sizing: border-box; } 


.cols2-main{ width: 100%; float: left; padding: 0; }
.cols2_inner{  width: 100%;float: left; background: #fff; text-align: left;} 
.cols2-nobox
{
    width: 49%;
    float: left;
    padding: 0 15px 0px 15px;
    margin: 30px 0.3% 30px 0.7%;
    box-sizing: border-box;
}
.cols2-quizbox
{
    width: 99%;
    float: left;
    padding: 0 15px 15px 15px;
    margin: 20px 0.3% 15px 0.7%;
    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);
}
.cols2-img { width: 100%; float: left; text-align: center; padding-top: 5px;}
.cols2-img img { max-width: 100%; text-align: center; }
.cols2_inner h2{ vertical-align: top; text-align: center; line-height: 1; font-family: 'BenchNine', sans-serif; font-weight: normal; font-size: 30px; font-style: normal; color: #00afef;}  
.cols2_inner h3
{
    text-align: left;
    line-height: 1;
    font-family: 'BenchNine', sans-serif; 
    font-weight: normal;
    font-size: 24px;
    font-style: italic;
    color: #00afef;
    margin-top: 20px;
}
.cols2_inner  p { vertical-align: top; text-align: left;  padding: 0px 0px 0px 0px; color: #808080; }
.cols2_inner  ul { vertical-align: top; text-align: left;  }
.cols2_inner  ol { vertical-align: top; text-align: left; margin: 0; padding: 0 10px 10px 20px;}
.cols2_inner  li { padding: 0px 0px 8px 0px; }
.cols2_inner  b { font-weight: bold; color: #555555;}


.cols3-main { width: 100%; float: left; padding: 0; margin-top: 10px; }
.cols3_inner {  width: 100%;float: left; background: #fff; text-align: left;}  
.cols3-box
{
    width: 32.3%;
    float: left;
    padding: 0 5px 15px 5px;
    margin: 0px 0.3% 0px 0.7%;
    border: 1px solid #808080;
    box-sizing: border-box;
}
.cols3-nobox /* same as cols3-box apart from border */
{
    width: 32.3%;
    float: left;
    padding: 0 5px 15px 5px;
    margin: 0px 0.3% 0px 0.7%;
    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: 100%; text-align: center; }


.cols3_inner h2 { text-align: center; font-family: 'BenchNine', sans-serif; font-weight: normal; font-size: 30px; line-height: 1; font-style: normal; color: #a8cf45;}
.cols3_inner h2 a { text-align: center; font-family: 'BenchNine', sans-serif; font-weight: normal; font-size: 30px; line-height: 1; font-style: normal; color: #a8cf45; text-decoration: none;}
  
.cols3_inner h3
{
    text-align: center;
    line-height: 22px;
    font-family: 'BenchNine', sans-serif;
    font-weight: normal;
    font-size: 24px;
    font-style: normal;
    color: #a8cf45; 
}
.cols3_inner  p { vertical-align: top; text-align: left;  padding: 0px 15px 5px 15px; color: #808080; }
.cols3_inner  ol { vertical-align: top; text-align: left; margin: 0; padding: 0 15px 10px 20px;}
.cols3_inner  ul { vertical-align: top; text-align: center; margin: 0; padding: 0 15px 15px 15px; font-family: 'BenchNine', sans-serif; }
.cols3_inner  li { list-style-type: none;
                   width: auto;
                   display: inline-block;
                   text-align: center; 
                   margin: 5px;
                   padding: 8px; 
                   background-color: #a8cf45;
                   color: #ffffff;
                   text-decoration: none;
                   border-radius: 0px;
                   box-sizing: border-box;
                   box-shadow: 0 4px 5px 0 rgba(0,0,0,.5),0 1px 10px 0 rgba(0,0,0,.5),0 2px 4px -1px rgba(0,0,0,.3); 
                 }               
 
.cols3_inner  li  a { font-family: 'BenchNine', sans-serif;  font-weight: normal; font-size: 18px; line-height: 1; color: #ffffff;  text-decoration: none; }  
.cols3_inner  li  a:visited { position: relative; color: #ffffff;} 
.cols3_inner  li  a:hover { position: relative; color: #594390; }            
                  
.cols3_inner  b { font-weight: bolder; color: #555555;}


.cols4-main{ width: 100%; float: left; padding: 0; }
.cols4_inner{  width: 100%;float: left; background: #e8e8e8; text-align: left;}  
.cols4-box
{
    width: 24%;
    float: left;
    padding: 0 15px 15px 10px;
    margin: 10px 0.3% 10px 0.7%;
    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);
}
.cols4-nobox
{
    width: 24%;
    float: left;
    padding: 0 5px 15px 5px;
    margin: 0px 0.3% 0px 0.7%;
    box-sizing: border-box;
}

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

.cols4_inner h2{ text-align: center; line-height: 1; font-family: 'BenchNine', sans-serif; font-weight: bold; font-size: 35px; font-style: normal; color: #a8cf45;  }
.cols4_inner h3
{
    text-align: center;
    line-height: 1;
    font-family: 'BenchNine', sans-serif;
    font-weight: normal;
    font-size: 20px;
    color: #a8cf45;
}
.cols4_inner  p { vertical-align: top; text-align: left;  padding: 0px 10px 5px 10px; color: #808080; }
.cols4_inner  ul { vertical-align: top; text-align: left; font-family: 'BenchNine', sans-serif;  margin: 0; padding: 0 15px 10px 10px;}
.cols4_inner  ul li { padding: 0px 0px 8px 0px; }

.cols4_inner  ol { vertical-align: top; text-align: center; margin: 0; padding: 0px 15px 15px 15px; font-family: 'BenchNine', sans-serif;  }
.cols4_inner  ol li { padding: 10px 10px 10px 10px; 
                                list-style-type: none;
                                width: auto;
                                min-width: 51%;
                                display: inline-block;
                                text-align: center;
                                margin: 5px;
                                box-sizing: border-box;
                                border: medium solid #b7d574;
                                border-radius: 15px;
                                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); }
 
.cols4_inner ul li  a { font-family: 'BenchNine', sans-serif;  font-weight: normal; font-size: 18px; color: #808080;  text-decoration: none; }  
.cols4_inner ol li  a { font-family: 'BenchNine', sans-serif;  font-weight: normal; font-size: 18px; color: #808080;  text-decoration: none; }  
.cols4_inner  li  a:visited {text-decoration: none; position: relative; color: #808080;} 
.cols4_inner  li  a:hover {text-decoration: underline; position: relative; color: #a8cf45;}          

.cols4_inner  b { font-weight: bolder; color: #555555;}


    
.cols8-main{  width: 100%; float: left; padding: 0; }
.cols8_inner{ width: 100%; margin: 0 auto; }    /* the margin: 0 auto; WITHOUT float or text-align, is what gets the div to center within another div */

.cols8-nobox
{
    width: 12.5%;
    float: left;
    padding: 10px;
    margin: 40px 0px 20px 0px;
    box-sizing: border-box;
}
.cols8_inner h2 { text-align: left; font-family: 'BenchNine', sans-serif; font-weight: normal; font-size: 30px; line-height: 1; font-style: normal; color: #a8cf45; margin-top: 35px;}
.cols8-main .cols8_inner p {  text-align: center; font-family: 'BenchNine', sans-serif; font-weight: normal; font-size: 18px; color: #000000; padding: 5px; }
.cols8-main .cols8_inner .cols8-img { width: 100%; float: left; text-align: center; padding-top: 0;}
.cols8-main .cols8_inner .cols8-img img { max-width: 51%; text-align: center; }


.cols75-25-main{ width: 100%; float: left; padding: 0; }
.cols75-25_inner{  width: 100%;float: left; background: #fff; text-align: center;
    border-bottom: thin solid #808080;
}
 
.cols75-25-widebox
{
    width: 74.8%;
    float: left;
    padding: 0 5px 5px 5px;
    margin: 10px 0.1% 10px 0.1%;
    box-sizing: border-box;
}
.cols75-25-narrowbox
{
    width: 24.8%;
    float: left;
    padding: 0 5px 5px 5px;
    margin: 10px 0.1% 10px 0.1%;
    box-sizing: border-box;
}
.cols75-25-img { width: 100%; float: left; text-align: center; padding-top: 15px;}
.cols75-25-img img { max-width: 100%; text-align: center; }
.cols75-25_inner h2{vertical-align: top; text-align: center;   line-height: 1; font-family: 'BenchNine', sans-serif; font-weight:  
                 bold; font-size: 27px; font-style:  normal; color: #a8cf45;}    
.cols75-25_inner h3 {vertical-align: top; text-align: center;   line-height: 1; font-family: 'BenchNine', sans-serif; font-weight:  
                 bold; font-size: 22px; font-style:  normal; color: #a8cf45; }
.cols75-25_inner p { vertical-align: top; text-align: justify;  padding: 0px 0px 5px 0px; color: #808080; }
.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; color: #555555;}


.subs  { width: 98%; max-width: 450px; text-align: left; vertical-align: top; padding-top: 0px; padding-left: 10px; border-collapse: separate; border-spacing: 3px 12px; 
                           background-color: #a8cf45; font-size:14px;}
.subs-block { width: 75%; text-align: left; padding-top: 0px; font-family: "Arial", sans-serif; font-size:14px; color: #808080;}
.gugl-block { max-width: 90%; text-align: left; padding-top: 0px; padding-left: 8px; }

.form-inputbox { width: 280px; }
.form-button
{
    margin: 15px;
    padding: 5px;
    background-color: #00afef;
    color: #000000;
    font-family: 'BenchNine' , sans-serif;
    font-size: 20px;
    font-weight: normal;
}
.label-reqd { display: none; }
.fb-footer { margin: 0; padding: 10px; background-color: #ffffff; border:  3px solid #a8cf45; 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 { text-align: right; padding: 0px 10px 40px 0px;}
.p-left { text-align: left; padding: 15px;  }
.p-center { text-align: center; padding: 15px; margin-bottom: 20px; }
.highlighted 
{
    padding: 10px;
    background-color: #d3e3a5;
    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: #666666;
    width: 100%;
    float: left;
    padding: 0;
    margin-top: 35px;
}
                        
.footer_inner
{
    width: 100%;
    float: left;
    text-align: center;
}  

 
.footer-quarterbox
{
    width: 24%; 
    float: left;
    padding: 5px 5px 5px 5px;
    margin: 5px 0.3% 5px 0.7%;
    text-align: left;
    color: #ffffff;
    font-family: 'BenchNine', sans-serif;
    font-size: 17px;
    
    font-weight: normal;
    box-sizing: border-box;  
}

.footer-quarterbox h3   {
    text-align: left;
    vertical-align: top;
    line-height: 1.2;
    font-family: 'BenchNine', sans-serif;
    font-weight: bold;
    font-size: 25px;
    font-weight: normal;
    font-style:  normal;
    color: #00afef;
    margin-bottom: 20px;
}


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

.copyright { width: 100%; text-align: center; font-family: 'BenchNine', sans-serif; font-size: 18px; line-height: 3; color: #00afef; font-weight: normal; }
.copyright p  { text-align: center; font-family: 'BenchNine', sans-serif; font-size: 18px; color: #00afef; font-weight: normal; }
.copyright a { text-align: center; font-family: 'BenchNine', sans-serif; font-size: 18px; color: #00afef; font-weight: normal; text-decoration: none;}



/* RESPONSIVE CSS */

@media screen and (max-width:1600px){
    /*none now*/
}

@media screen and (max-width:1200px){
    .logo { top: 3px; }
    .logo img { width: 98%; height: 98%; }
    .header-inner { height: 120px; }
    .main { margin-top: 108px;}
    .menu-banner { width: 74%; }
    .heading h1 { font-size: 25px;}
    
            .topnav { margin-top: -28px;  }
            
            .topnav a { font-size: 13px; padding: 7px 10px; }
            
            .dropdown .dropbtn { font-size: 13px; padding: 1px 12px; }
 
    .cols1_inner h2 {  padding: 5px 8px;  font-size: 27px; }  
    .cols1_inner h3 {  padding: 5px 8px;  font-size: 22px; }  
           
    .green-block { font-size: 18px; margin-top: 0px; }
    
    .cols2_inner h2 {  padding: 5px 8px;  font-size: 27px; }  
    .cols2_inner h3 {  padding: 5px 8px;  font-size: 22px; }  
        
    .cols3_inner h2 {  padding: 5px 8px;  font-size: 27px; } 
    .cols3_inner h2 a { font-size: 27px; } 
    .cols3_inner h3 {  padding: 5px 8px;  font-size: 22px; } 

    .cols4_inner h2 {  padding: 5px 8px;  font-size: 32px; }  
    .cols4_inner h3 {  padding: 5px 8px;  font-size: 30px; }  
    
    .cols8_inner h2 {  padding: 5px 8px;  font-size: 18px; }
    .cols8-main .cols8_inner p {  padding: 5px;  font-size: 17px;  }  
    
    .cols75-25_inner h2 {  padding: 5px 8px;  font-size: 25px; }  
    .cols75-25_inner h3 {  padding: 5px 8px;  font-size: 21px; }  
    
    .blog_inner h2 {  padding: 5px 8px;  font-size: 28px; }  
    .blog_inner h3 {  padding: 5px 8px;  font-size: 24px; } 
    
    .footer-quarterbox h3   { font-size: 23px; }
    .form-inputbox { width: 220px; } 
}

@media screen and (max-width:991px){
    body
    {
        font-size: 14px;
        line-height: 1.2; 
    }
    
    a.CTAlink { font-size: 20px; }
    a.CTAlink:visited { font-size: 20px; }
    a.CTAlink:hover { font-size: 20px; }
    
    a.CTAlink2 { font-size: 15px; }
    a.CTAlink2:visited { font-size: 15px; }
    a.CTAlink2:hover { font-size: 15px; }
    
    .review { font-size: 21px; }
    
    .logo { top: 10px; }
    .header-inner { height: 102px; }
    .main { margin-top: 80px;}
    .menu-banner {top: 3px; }
    .heading h1 { font-size: 22px; font-weight: normal;}
    
        
        .topnav {max-width: 98%;  margin-top: -33px; }
        
        .topnav a { font-size: 13px; padding: 5px 5px; }
        
        .topnav a img {width: 28px; height: 28px; }
            
        .dropdown .dropbtn { font-size: 13px; padding: 1px 5px; }
        
        .dropdown-content { min-width: 160px; }


    .cols1-img img{   text-align: center; width: 99%;} 
    .cols1_inner h2 { font-size: 22px;    padding: 0 15px 0;}
    .cols1_inner h3 { font-size: 18px;    padding: 7px 0px;}    
    
    .green-block { font-size: 15px; margin-top: 0px; } 
    
    .cols2-img img{   text-align: center; width: 99%;} 
    .cols2_inner h2 {  font-size: 22px;    padding: 0 15px 0;}
    .cols2_inner h3 {  font-size: 18px;    padding: 7px 0px;}    
    
    .cols3-img img { text-align: center; width: auto;}  
    .cols3_inner h2 { font-size: 18px; padding: 0 15px 0;}
    .cols3_inner h2 a { font-size: 18px; }
    .cols3_inner h3 { font-size: 16px;    padding: 7px 0px;}
    .cols3_inner table.subs { font-size:13px;}
    
    .cols2_inner table.subs { font-size:13px;}
    .blog-widebox table.subs { font-size:13px;}
      
    .cols4img img { text-align: center; width: 99%;}  
    .cols4_inner h2 { font-size: 32px; padding: 0 15px 0;}
    .cols4_inner h3 { font-size: 30px; padding: 7px 0px;}   
   
    .cols8-main { padding: 0;} 
    .cols8-main .cols8_inner { text-align: center; padding: 5px 0px 0px 0px;}
    .cols8_inner h2 {  font-size: 18px;    padding: 0 15px 0;}
    .cols8-main .cols8_inner p {   font-size: 15px;    padding: 0;}
    .cols8-main .cols8_inner .cols8-img { width: 100%; float: left; text-align: center; padding: 0;}
    .cols8-main .cols8_inner .cols8-img img{   text-align: center; width: 85%;}    
    
    .cols75-25-img img{   text-align: center; width: 99%;}  
    .cols75-25_inner h2 { font-size: 22px; }
    .cols75-25_inner h3 { font-size: 18px; }
    .cols75-25_inner p { text-align: left; }
    
    .blog-img img{   text-align: center; width: 99%;}  
    .blog-profile-img img{   text-align: center; width: 99%;} 
    .blog_inner h2 {    font-size: 22px;  }
    .blog_inner h3 {    font-size: 18px;  }
    .blog_inner .blog-widebox p {   text-align: left; }
    .blog_inner .blog-narrowbox p { text-align: left; font-size: 13px;}
    

    .footer-quarterbox
    {
    width: 49%; /* 4 blocks to split into 2 groups of 2 */
    margin: 20px 0.3% 5px 0.7%;
    line-height: 1.2;
    font-size: 15px;
    }
    .footer-quarterbox h3  { font-size: 22px; }
    .footer-quarterbox a { min-width: 48px;}  
    a.icon img { width: 25px; height: 25px; }

    a.heart img { text-align: center; width: 69%; }
    
    .subs  { width: 98%; text-align: left; vertical-align: top; padding: 5px; border-collapse: separate; border-spacing: 3px 8px; 
                               background-color: #b7d574; font-size:13px;}
    .subs-block { width: 90%; text-align: left; padding: 0; font-size:13px; font-weight:bold;}
    .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 (min-width:768px) {
  .heading h1 br { display: none; }
}


@media screen and (max-width:767px){   /* Hamburger Menu enters */
                            
    body
    {
        font-size: 17px;
        line-height: 1.5; 
        text-align: left;
    }
    
    a.CTAlink { font-size: 21px; }
    a.CTAlink:visited { font-size: 21px; }
    a.CTAlink:hover { font-size: 21px; }
    
    a.CTAlink2 { font-size: 19px; }
    a.CTAlink2:visited { font-size: 19px; }
    a.CTAlink2:hover { font-size: 19px; }
    
    .review { font-size: 25px; margin: 25px 2% 20px 2%; }

    .header-main { padding: 0; margin: 0 auto; height: 110px;}
    .header-inner { height: 110px; width: 100%; margin: 0 auto; }
    .main { margin-top: 110px; padding: 0;}
            .topnav {max-width: 90%; margin-right: 20px; margin-top: -25px;}
            
            /* 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: 16px; padding: 10px 10px; }
                          
              .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;}
              .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: 90%}
              .topnav.responsive .dropdown-content { display: none; position: relative;}
              .topnav.responsive .dropdown .dropbtn {
                display: block;
                width: 100%;
                text-align: left;
                min-width: 350px;
                padding: 0px 5px;
              }
              
              
    .container { width: 100%; margin: 0 auto;}

    
    .logo {  width: 45%; max-width: 45%; position: absolute;    top: 3px;  float: left;    bottom: auto; padding: 0;}
    .logo img {text-align: center; width: 97%; height: 97%; } 
    
    .menu-banner { width: 55%; max-width: 55%; float: right; top: 3px; right: 4px; }
    .heading { width: 99%; top: 0px; float: right; text-align: center; }
    .heading h1 { width: 95%; font-size: 20px; line-height: 1.1; text-align: center; padding: 1px 5px 1px 5px; margin: 0; }
    .heading h2 { display: none; }
                     
    
    .hero-inner { text-align: center; padding: 0px 0px 0px 0px;}
    .hero-image img { width: 100%; }    


    .cols1-main { padding: 0;} 
    .cols1_inner { padding: 0;}
    .cols1-nobox { width: 100%;  padding: 0px 5px 10px 10px; margin: 0; }
    .cols1_inner h2 { text-align: center; font-size: 25px; line-height: 1.2; padding: 0; margin: 20px 0px 0px 0px;} 
    .cols1_inner h3 { text-align: center; font-size: 22px; line-height: 1.2; padding: 0;} 
    .cols1_inner p { padding: 0; margin: 10px 0px 0px 0px;}
    
    
    .green-block { padding: 25px; font-size: 20px; margin-top: 15px; } 
             
    .cols2-main { padding: 0;} 
    .cols2_inner { padding: 0;}
    .cols2-nobox { width: 99%;  padding: 0px 5px 10px 10px; margin: 40px 0px 15px 0px; }
    .cols2_inner h2 { text-align: center; font-size: 24px; line-height: 1.2; padding: 0; margin: 20px 0px 0px 0px;} 
    .cols2_inner h3 { text-align: center; font-size: 21px; line-height: 1.2; padding: 0;} 
    .cols2_inner p { padding: 0; margin: 10px 0px 0px 0px;}

    .cols3_inner table.subs  { font-size:15px;} 
    .cols2_inner table.subs  { font-size:15px;}
       
    .cols3-main { padding: 0;} 
    .cols3_inner { padding: 0px 0px 0px 0px;} 
    .cols3-box { width: 99%;  padding: 0px 8px 30px 10px; margin: 0; border: none; border-bottom: 2px solid #b7d574;} 
    .cols3-nobox { width: 99%;  padding: 0px 8px 30px 10px; margin: 0; border: none; } 
    .cols3-img img { margin-top: 10px; } 
    .cols3_inner h2 { font-size: 25px; line-height: 1.2; text-align: center; padding: 0;}
    .cols3_inner h2 a { font-size: 25px; line-height: 1.2; text-align: center; padding: 0;}
    .cols3_inner h3 { font-size: 22px; line-height: 1.2; text-align: center; padding: 0;}
    .cols3_inner p { padding: 0;}
    .cols3_inner ul { padding: 0; width: 80%;} 
    .cols3_inner ul li { padding: 5px 5px 5px 5px; } 
    .cols3_inner ul li a { font-size: 20px; text-align: center; padding: 5px 15px 5px 15px; }           


    .cols4-main { padding: 0;} 
    .cols4_inner { padding: 10px 0px 0px 0px;}
    .cols4-box { width: 49%;  padding: 0px 5px 10px 10px;}  
    .cols4-nobox { width: 49%;  padding: 0px 5px 10px 10px; margin-bottom: 20px; border-right: none; border-bottom: 2px solid #b7d574;} 
    .cols4_inner h2 { text-align: center; font-size: 25px; line-height: 1.2; padding: 0;} 
    .cols4_inner h3 { text-align: center; font-size: 22px; line-height: 1.2; padding: 0;}  
    .cols4_inner p { padding: 0;}
    .cols4_inner ul { margin: 5px 5% 0px 5%; }
    .cols4_inner ul li { padding: 0px 0px 15px 0px; margin: 0;}
    .cols4_inner ol { padding: 0; margin: auto; width: 95%;} 
    .cols4_inner ol li { padding: 5px 5px 5px 5px; } 
    .cols4_inner ol li a { line-height: 20px; font-size: 20px; text-align: center; padding: 5px 15px 5px 15px; } 
    
    .cols8-main { padding: 0;}
    .cols8-main .cols8_inner { text-align: center; padding: 30px 0px 0px 0px;}
    .cols8_inner h2 { font-size: 25px; text-align: center; padding: 0;}
    .cols8-main .cols8_inner .cols8-nobox { text-align: center; width: 25%;  font-size: 16px; padding: 10px; margin: 0;} 
    .cols8-main .cols8_inner .cols8-img img { width: 99%; } 
        
    .cols75-25-main{ padding: 0; }
    .cols75-25_inner { padding: 5px 0px 0px 0px;}
    .cols75-25-widebox { width: 75%;  padding: 0px 5px 10px 5px;}  
    .cols75-25-narrowbox { width: 24%;  padding: 0px 5px 10px 5px;} 
    .cols75-25_inner h2 { text-align: center; line-height: 1.2; font-size: 18px; padding: 0;} 
    .cols75-25_inner h3 { text-align: center; line-height: 1.2; font-size: 18px; padding: 0;}  
    .cols75-25_inner p { padding: 0;}
      
    .blog-main{ padding: 0; }
    .blog_inner { padding: 5px 0px 0px 0px;}
    .blog-widebox { width: 99%;  padding: 0px 15px 10px 15px; margin: 0;}  
    .blog-narrowbox { width: 99%;  padding: 0px 15px 10px 15px; margin: 0;} 
    .blog-profile-img img{   text-align: center; width: 55%;} 
    .blog_inner h2 { text-align: center; line-height: 1.2; font-size: 25px; padding: 0;} 
    .blog_inner h3 { text-align: center; line-height: 1.2; font-size: 25px; padding: 0;}  
    .blog_inner .blog-widebox p { padding: 0;}
    .blog_inner .blog-narrowbox p { padding: 0; font-size: 15px; line-height: 1.2;}
     
    .footer-main { padding: 0; }
    .footer_inner { padding: 0;}
    .footer-quarterbox
    {
    width: 93%; /* there are 4 blocks to show one underneath the other */
    margin: 20px 3% 5px 4%;
    padding: 2px;
    font-size: 20px;
    }
    
    .footer-quarterbox h3 { line-height: 25px; font-size: 25px; margin: 10px 0px 15px 0px; }
    .footer-quarterbox a  { min-width: 48px; } 
    a.icon img  { width: 25px; height: 25px; }
    
    a.heart img { text-align: center; width: 65%; }
    

    .copyright { width: 90%;  padding: 0px 10px 10px 10px; margin: auto; }
    .copyright p  { line-height: 1.2; font-size: 18px; }
    .copyright a { line-height: 1.2; font-size: 18px; }

    .subs  { width: 91%; text-align: left; vertical-align: top; padding: 5px 15px 5px 15px; border-collapse: separate; border-spacing: 3px 12px; 
                               background-color: #b7d574; font-size:15px;}
    .subs-block { width: 90%; text-align: left; padding: 8px; font-size:15px; font-weight:bold;}
    .gugl-block { max-width: 98%; text-align: left; padding-left: 2px; overflow-x: hidden;}
    
    .p-right { text-align: center; padding: 0px 0px 40px 0px; }
}

@media screen and (max-width:479px)
{    
    body
    {
        font-size: 17px;
        line-height: 1.6; 
        text-align: left;
    }
    
    
    a.CTAlink { font-size: 23px; }
    a.CTAlink:visited { font-size: 23px; }
    a.CTAlink:hover { font-size: 23px; }
    
    a.CTAlink2 { font-size: 15px; }
    a.CTAlink2:visited { font-size: 15px; }
    a.CTAlink2:hover { font-size: 15px; }
    
    
    .logo {  width: 35%; max-width: 35%; top: 4px; padding: 0;}
    .menu-banner { width: 65%; max-width: 65%; top: 1px;}
        
        .topnav {max-width: 99%; margin-top: -45px; margin-right: 8px; min-width: 250px;}

        .topnav.responsive .dropdown .dropbtn {  min-width: 290px;   }
           
        .topnav a { font-size: 18px; line-height: 1.5; padding: 5px 5px; }
        
        .topnav a img {width: 22px; height: 22px; }
            
        .dropdown .dropbtn { font-size: 18px; line-height: 1.5; padding: 1px 5px; }
        
        
    .header-main {  height: 88px;}
    .header-inner {  height: 88px;}
    .main { margin-top: 88px;}
    
    .heading h1 { font-size: 18px; line-height: 1.1; font-weight: bold; }
  

    .cols1_inner h2 { width: 96%;  font-size: 26px; line-height: 1.5;}
    .cols1_inner h3 { width: 96%;  font-size: 18px; line-height: 1.5;}      
        
    .cols2_inner h2 { width: 96%;  font-size: 26px; }
    .cols2_inner h3 { width: 96%;  font-size: 20px; }
    
    .cols3_inner h2 { width: 96%;  font-size: 26px; }
    .cols3_inner h2 a { font-size: 25px; }
    .cols3_inner h3 { width: 96%;  font-size: 20px;  }    
    .cols3_inner ul { text-align: center; padding: 0; width: 99%;} 
    .cols3_inner ul li { padding: 8px 2px 8px 2px; } 
    .cols3_inner ul li a { line-height: 16px; font-size: 16px; text-transform: uppercase; text-align: center; padding: 5px 2px 5px 2px; }
    
    .cols4-main { padding: 0;} 
    .cols4_inner { padding: 10px 0px 0px 0px;}
    .cols4-box { width: 99%;  padding: 0px 5px 10px 5px;}  
    .cols4-nobox { width: 99%;  padding: 0px 5px 30px 5px; margin-bottom: 20px; border-right: none; border-bottom: 2px solid #b7d574;} 
    .cols4_inner h2 { width: 96%; font-size: 26px; }
    .cols4_inner h3 { width: 96%; font-size: 20px; }
    .cols4_inner ol { text-align: center; padding: 0; } 
    .cols4_inner ol li { padding: 8px 2px 8px 2px; min-width: 30%; } 
    .cols4_inner ol li a { line-height: 16px; font-size: 16px; text-transform: uppercase; text-align: center; padding: 5px 2px 5px 2px; }
    
    .cols8_inner { padding: 30px 0px 0px 0px;}
    .cols8_inner h2 { width: 96%;  line-height: 25px; font-size: 25px;  }

    .cols75-25_inner h2 { width: 96%; font-size: 23px; }
    .cols75-25_inner h3 { width: 96%; font-size: 19px; }
    
    .blog_inner h2 { width: 96%; }
    .blog_inner h3 { width: 96%; }
         
    a.heart img { text-align: center; width: 98%; }
    
    .form-inputbox { width: 220px; }   
    .form-button { margin: 10px; font-size: 17px;  }

}