/*   USING FONTS Arial, Arial Narrow (with Arial condensed as backup) & Tahoma.   */
body
{
    font-family: 'Arial' , sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #666666;
    background-color: #ffffff;
    text-align: center;
    margin: 0 auto;
}

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

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

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


a.CTAlink
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    line-height: 2.2;
    font-weight:  normal;
    font-style: normal;
    background-color: #000000;
    color: #fffffc; 
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    border-radius: 7px;
    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);
   
}


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


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


.review
{
    margin: 20px 0px 0px 0px;
    padding: 8px 13px 8px 13px;
    text-align: center;
    font-size: 22px;
    line-height: 1.3;
    font-weight: normal;
    font-style: italic;
    color: #000000;
    

}


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

.fb-pixel
{
    height: 1px;
    width: 1px;
    display: none;
}



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


.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 {   width: 100%; padding: 0;   margin: 0 auto; background-size: 100% 100%;  }
                          
                          
.header-inner { max-width: 100%; width: 100%;  height: 160px; position: relative; padding: 0;   margin: 0 auto; }

 
.logo
{
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
    float: left;
    padding: 0px;
    line-height: 1;
    font-family: 'Arial' , sans-serif;
    font-size: 5px;
    color: #000000;
    margin: 0px;
}

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

.logo icon { width: 15px; height: 15px; line-height: 1; margin: 0px 10px 0px 10x;}

.logo p { padding: 0px; margin: 0px 10px 0px 10px; font-size: 15px; font-weight: bold; }
                       
.menu-banner
{
    position: relative;
    top: 130px;
    right: 0px;
    width: 100%;
    height: 30px;
    float: right;
    text-align: center;
    background-color: #000000;
}

.heading { width: 100%; top: 0px; float: right; }
        
        .topnav { width: 99%; margin: 0 auto; /* display: table; */ text-align: center; vertical-align: middle; overflow: hidden; }

        .topnav a {
            /*display:table-cell; */
            color: #fffffc;
            text-align: center;
            /*vertical-align: middle; */
            text-decoration: none;
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 20px;
            line-height: 1.3;
            font-weight:  normal;
            min-width: 48px;
        }
    
        
        .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: 20%; text-align: center; }
        
        /* Style the dropdown button to fit inside the topnav */
        .dropdown .dropbtn {
            font-size: 20px; 
            border: none;
            outline: none;
            color: #ffca00;
            text-align: center;
            /*padding: 0px 25px;*/ 
            text-decoration: none;
            font-family: 'Arial', sans-serif;
            font-weight:  normal;
            vertical-align: middle;
            min-width: 48px;
            background-color: transparent; /* #ffca00;*/
            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: 'Arial', sans-serif;
            font-size: 19px;
            font-weight: normal;
        }
        
        .dropdown-content a img {width: 35px; height: 35px; }
        
        .topnav a:hover {
            color: #ffca00; position: relative;}
        
        .topnav .dropdown:hover .dropbtn { text-decoration: none; color: #ffca00; }
        
        .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: 160px; /* Add a top margin to avoid content overlay with STATIC MENU BAR */
}
.hero-container { max-width: 1920px;        margin: 0 auto;        width: 100%;    }
.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; }


.h2 { font-family: 'Roboto Condensed', sans-serif;   text-align: center;    margin: 0px 0px 0px 0px;    font-size: 26px;    font-style:  normal;    
                                           font-weight: normal;    color: #9B8D7E;}
                                           


.cols1-main{  width: 100%; float: left; padding: 0; }
.cols1_inner{  width: 100%;float: left; background: #fff; text-align: left; } 
      
.cols1-nobox
{
    display: inline-block;
    position: relative;
    vertical-align: top; 
    min-height: 150px;
    
    width: 99%;
    float: left;
    padding: 0 20px 0px 20px;
    margin: 20px 0.5% 15px 0.5%;
    box-sizing: border-box;}
 
    

.cols1-main .cols1_inner h1, .cols1-main .cols1_inner h2 {
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center; 
    margin: 5px 0px 0px 0px;
    font-size: 22px;
    font-style: normal;
    font-weight:  bolder;
    color: #bd451e;
    
    position: relative;
    z-index: 1;
    overflow: hidden;
}


.cols1-main .cols1_inner h3 {vertical-align: top; text-align: center; line-height: 1.2; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 25px; font-style:  normal; color: #000000; }

.cols1-main .cols1_inner  p { vertical-align: top; text-align: justify;  padding: 0px 0px 5px 0px; }
.cols1-main .cols1_inner  ul { vertical-align: top; text-align: left;  margin: 0; padding: 0 10px 10px 20px; list-style: none; }
.cols1-main .cols1_inner  ol { vertical-align: top; text-align: left; margin: 0; padding: 0 10px 10px 20px;}
.cols1-main .cols1_inner  li { padding: 0px 0px 8px 0px;  }

.cols1-main .cols1_inner  b { font-weight: bold; }
.cols1-main .cols1_inner .imgZ { width: 100%; float: left; text-align: center; padding-top: 5px;}
.cols1-main .cols1_inner .imgZ img { max-width: 100%; text-align: center; }
.cols1-main .cols1_inner table.subs  { width: 98%; text-align: center; padding-top: 0px; border-collapse: separate; border-spacing: 3px 12px;}
.cols1-main .cols1_inner td.subsField  { width: 40%; text-align: right; padding-top: 0px; }
.cols1-main .cols1_inner td.subsEntry { width: 60%; text-align: left; padding-top: 0px; }
.cols1-main .cols1_inner td.subsEntry2 { width: 60%; text-align: left; padding-top: 0px; font-size:12px;}

                                          

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

.cols3_inner{  width: 100%;float: left; background: #fff; text-align: left;} 

.cols3-noshadowbox
{
    width: 33%;
    float: left;
    padding: 0 0.2% 0px 0.2%;
    margin: 15px 0.1% 30px 0.2%;
    box-sizing: border-box;
    border-radius: 0px;
    
    /*border-left: 3px solid #ff0a27; 
    border-bottom: 3px solid #ffca00;  
    box-shadow: 0 4px 5px 0 rgba(255,202,0,.14),0 1px 10px 0 rgba(255,202,0,.12),0 2px 4px -1px rgba(255,202,0,.2);*/
}

.cols3-img { width: 100%; float: left; text-align: center; padding-top: 33px; margin: 0px 0px 20px 0px;  }

.cols3-img img { max-width: 100%; text-align: center; 
                  box-shadow: 0 4px 5px 0 rgba(0,0,0,.4),0 1px 10px 0 rgba(0,0,0,.2),0 2px 4px -1px rgba(0,0,0,.7); }
.cols3_inner h1 {
                    font-family: 'Roboto Condensed', sans-serif;
                    text-align: left;
                    margin: 10px 0px 0px 0px;
                    font-size: 20px;
                    font-style: normal;
                    font-weight:  bolder;
                    color: #666666;
                }
                
.cols3_inner h2
{
    line-height: 1;
    margin-top: 10px;
    text-align: center; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-weight:  bold; 
    font-size: 25px; 
    font-style:  bold; 
    color: #000000;
    /* text-decoration: underline overline;
    text-decoration-color: #ffca00; */

}

.cols3_inner  p { vertical-align: top; text-align: left;  padding: 0px 0px 0px 0px; }
.cols3_inner  ul { vertical-align: top; text-align: left;  margin: 0; padding: 5px 10px 10px 20px; }
.cols3_inner  ol { vertical-align: top; text-align: left; font-family: 'Arial', sans-serif; margin: 0; padding: 0 10px 10px 20px;}
.cols3_inner  li { padding: 0px 0px 8px 0px; }
.cols3_inner  b { font-weight: bold; }


.cols2-main { width: 100%; float: left; padding: 0; }
.cols2_inner {  width: 100%;float: left; background: #fff; text-align: left;}  
.cols2-noshadowbox
{
    width: 49%;
    float: left;
    padding: 0 0.1% 0px 0.1%; 
    margin: 5px 0.3% 15px 0.7%;
    box-sizing: border-box;
}
.cols2-img
{
    width: 100%;
    float: left;
    text-align: left;
    padding: 0;
    margin: 0px 0px 20px 0px;
    font-size: 0px;
}
.cols2-img img { max-width: 100%; text-align: left; }


.cols2_inner h2{  line-height: 1;
    margin-top: 10px;
    text-align: center; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-weight:  bold; 
    font-size: 25px; 
    font-style:  bold; 
    color: #000000;  }
  
.cols2_inner h3
{
    line-height: 1;
    margin-top: 10px;
    text-align: center; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-weight:  bold; 
    font-size: 25px; 
    font-style:  bold; 
    color: #000000;
}
.cols2_inner  p { vertical-align: top; text-align: left;  padding: 0px 15px 5px 0px; }
.cols2_inner  ol { vertical-align: top; text-align: left; margin: 0; padding: 0 15px 10px 20px;}
.cols2_inner  ul { vertical-align: top; text-align: left;  margin: 0px 0px 0px 15px; padding: 10px 10px 10px 20px; }
.cols2_inner  li { padding: 0px 0px 8px 0px;  }
 
.cols2_inner  li  a { font-family: 'Arial', sans-serif; font-weight: bold; font-size: 18px; color: #ffca00;  text-decoration: none; }  
.cols2_inner  li  a:visited {text-decoration: none; position: relative; color: #ffca00;} 
.cols2_inner  li  a:hover {text-decoration: underline; position: relative; color: #ffca00;}            
                  
.cols2_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: 65.3%;
    float: left;
    padding: 0 10px 5px 10px;
    margin: 22px 0.5% 10px 0.5%;
    box-sizing: border-box;
}
.cols75-25-narrowbox
{
    width: 32.6%;
    float: left;
    padding: 0 5px 5px 15px;
    margin: 22px 0.5% 10px 0.5%;
    box-sizing: border-box;

}


.cols75-25-img { width: 90%; float: left; text-align: center; padding-top: 15px;}
.cols75-25-img img { max-width: 100%; text-align: center; box-shadow: 0 4px 5px 0 rgba(0,0,0,.4),0 1px 10px 0 rgba(0,0,0,.2),0 2px 4px -1px rgba(0,0,0,.7); }

    
.cols75-25_inner h1, .cols75-25_inner h2, .cols75-25_inner h3
{
    font-family: 'Roboto Condensed', sans-serif;
    text-align: left;
    margin: 5px 0px 0px 0px;
    font-size: 35px;
    font-style: normal;
    font-weight: bolder;
    color: #000000;
    /* text-decoration: underline overline;
    text-decoration-color: #ffca00; */
}

.cols75-25_inner h3
{
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    margin: 15px 0px 0px 0px;
    font-size: 35px;
    font-style: normal;
    font-weight: bolder;
    color: #000000;
}

.cols75-25_inner p { vertical-align: top; text-align: justify;  padding: 0px 0px 5px 0px; }


.cols75-25-usp
{
    width: auto;
    /*min-width: 51%;*/
    float: right;
    padding: 0 5px 0px 5px;
    margin: 5px; 
    box-sizing: border-box;
    border-right: 3px solid #ff0a27;
}

.cols75-25-usp p
{
    text-align: right;
    vertical-align: middle;
    padding: 0px 5px 0px 0px;
    margin: 5px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    font-size: 22px;
    line-height: 1.3;
    color: #000000;

}

.cols75-25-usp .p2 {  text-align: left;  vertical-align: middle; padding: 8px; margin: 0; 
                                     font-family: 'Arial', sans-serif; font-weight:  normal; font-size: 18px; color: #000000;}
                                     
.cols75-25_inner ul { vertical-align: top; text-align: left;  margin: 20px 0px 0px 1%; padding: 0 10px 10px 20px; box-sizing: border-box; list-style: none;  }

.cols75-25_inner ul li::before
{
    content: "\2022";
    color: #ff0a27;
    font-weight: 700;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 125%;
}

.cols75-25_inner ol { vertical-align: top; text-align: left;  margin: 3% 0px 0px 15%; padding: 0 10px 10px 40px; box-sizing: border-box;
    border-left: 13px solid #ffca00; 
    border-radius: 8px; }
    
.cols75-25_inner li { padding: 0px 0px 18px 0px; }
.cols75-25_inner b { font-weight: bold; }

.subs
{
    width: 98%;
    max-width: 450px;
    text-align: left;
    vertical-align: top;
    padding-top: 10px;
    padding-left: 10px;
    border-collapse: separate;
    border-spacing: 3px 12px;
    background-color: #E2E2E2;
    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: 250px; }
.form-button { margin: 15px; padding: 8px; background-color: #ffca00; color: #fffffc; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; border: none; /*thin solid #fffffc; */
                border-radius: 0px;
                box-sizing: border-box;
                /*box-shadow: 0 2px 3px 0 rgba(0,0,0,.3),0 1px 3px 0 rgba(0,0,0,.3),0 2px 3px -1px rgba(0,0,0,.2);*/ }
.label-reqd { display: none; }
.fb-footer { margin: 0; padding: 10px; background-color: #fffffc; border:  3px solid #ffca00; 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 230px 50px 0px; }
.p-left { text-align: left; padding-bottom: 25px;}
.p-center { text-align: center; padding: 15px 0px 50px 0px;}
.highlighted 
{
    padding: 10px;
    background-color: #ffca00;
    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);
}

.shopify-height { display:inline-block !important; height: 600px !important; width: 100% !important; }

.shopify-shop-height { display:inline-block !important; height: 600px !important; }

.videosize {width: 640px; border: 2px solid #ffca00; }


/* FOOTER CSS */

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

 
.footer-quarterbox
{
    width: 24%; 
    float: left;
    padding: 5px 5px 5px 5px;
    margin: 5px 0.3% 5px 0.7%;
    text-align: left;
    color: #666666;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    line-height: 1.9;
    font-weight: normal;
    box-sizing: border-box;  
}

.footer-quarterbox h3   {
    text-align: left;
    vertical-align: top;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    font-size: 20px;
    font-weight: bold;
    font-style:  normal;
    color: #000000;
    margin-bottom: 0px;
    /* text-decoration: underline overline;
    text-decoration-color: #ffca00; */
}


.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: #666666;}
.footer-quarterbox a:hover {text-decoration: underline; position: relative; }
.icon { width: 16px; height: 16px; line-height: 1;}
a.heart img { max-width: 100%;}

.copyright { text-align: center; font-family: 'Arial', sans-serif; font-size: 18px; color: #000000; font-weight: bold; min-width: 52%;}
.copyright p  { text-align: center; font-family: 'Arial', sans-serif; font-size: 18px; color: #000000; font-weight: bold; }
.copyright a { text-align: center; font-family: 'Arial', sans-serif; font-size: 18px; color: #000000; font-weight: bold; text-decoration: none;}




/* RESPONSIVE CSS */

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

@media screen and (max-width:1279px){
    body
    {
        font-size: 16px;
        line-height: 1.2; 
    }
    .container { width: 93%; }
    
    .header-inner { height: 155px;}
    .menu-banner {top: 125px; height: 30px;}
    .main { margin-top: 155px;}
    .logo { top: 0px; }
    .logo img { margin: 3px 18px 3px 18px; }
    
            .topnav { width: 99%; padding-top: 5px; }
            .topnav a { font-size: 15px; /*padding: 7px 10px; */}
            
            .dropdown .dropbtn { font-size: 15px; /*padding: 1px 12px; */}
     
    a.CTAlink { font-size: 17px; }
    a.CTAlink:visited { font-size: 17px; }
    a.CTAlink:hover { font-size: 17px; }
    
    .review { margin-top: 30px; font-size: 21px; }
 
    .cols1-main .cols1_inner h1, .cols1-main .cols1_inner h2 { font-size: 23px; }
        
    .cols3_inner h1 { font-size: 23px; }        
    .cols3_inner h2 { padding: 5px 3px; font-size: 23px; }  
    .cols3_inner h3 {  padding: 5px 8px;  font-size: 25px; }  
        
    .cols2_inner h2 {  padding: 5px 3px; font-size: 23px; }  
    .cols2_inner h3 {  padding: 5px 8px;  font-size: 25px; } 
    .cols2-noshadowbox { padding: 15px 5px 15px 5px; }
 
    .cols75-25-widebox {  margin-top: 15px; } 
    .cols75-25-narrowbox {  margin-top: 19px; } 
    .cols75-25_inner h1, .cols75-25_inner h2, .cols75-25_inner h3 { padding: 5px 0px; font-size: 23px; }   
    
    .cols75-25_inner h3 {  padding: 5px 8px;  font-size: 25px; }  
    .cols75-25-usp p { font-size: 16px; }
    .cols75-25-usp .p2 { font-size: 16px; }
    
    
    .footer-quarterbox { line-height: 1.5; font-size: 13px; }
    .footer-quarterbox h3  { font-size: 16px; }
    .icon { width: 14px; height: 14px; }
    
    .copyright { font-size: 14px; }
    .copyright p  { font-size: 14px; }
    .copyright a { font-size: 14px; }
    
    .form-inputbox { width: 220px; } 
}


/* 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:992px) and (hover: none) {
  .topnav .dropdown .dropdown-content { display: none; }  
}
@media screen and (min-width:992px) and (any-hover: on-demand) {
  .topnav .dropdown .dropdown-content { display: none; }
}

@media screen and (max-width:991px){
    body
    {
        font-size: 16px;
        line-height: 1.4; 
        text-align: left;
    }
    .container { width: 100%; }
    
    /*.header-inner { height: 110px;}
    .menu-banner {top: 110px; height: 38px;}
    .main { margin-top: 148px;}
    .logo img { margin: 10px; }*/    
    
    .header-inner { height: 145px; width: 100%; margin: 0 auto; /*border-bottom: 1px solid #ebebeb;*/}
    .menu-banner { width: 70%; top: 40px; height: 80px; background-color: transparent; }
    .main { margin-top: 145px; }

    .logo {  width: 30%; position: absolute;  text-align: left;  top: 0px;  float: left;    bottom: auto;}
    .logo img {text-align: left; margin: 5px;} 
    
                   
    a.CTAlink { font-size: 21px; }
    a.CTAlink:visited { font-size: 21px; }
    a.CTAlink:hover { font-size: 21px; }
           
        
        /*.topnav { width: 98%; }
        
        .topnav a { font-size: 13px;  }
        
        .topnav a img {width: 35px; height: 35px; }
            
        .dropdown .dropbtn { font-size: 13px; }
        
        .dropdown-content { min-width: 160px; }
        
        .dropdown-content a img {width: 30px; height: 30px; }*/
        
        
        
        .topnav {max-width: 98%; /*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: 28px; line-height: 1.2; padding: 20px; color: #fffffc; }
              .topnav a:hover { color: #000000; }
            
              .topnav a img {width: 40px; height: 40px; }
                          
              .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. It makes the topnav look good (displays links vertically) */
            
              .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: #666666;}
              .topnav.responsive .dropdown-content { display: none; position: relative; }
              .dropdown-content a img {width: 18px; height: 18px; }
              .topnav.responsive .dropdown .dropbtn {
                display: block;
                width: 100%;
                text-align: left;
                min-width: 355px;
                padding: 0px 2px;
              }
              

    .review { margin-top: 20px; font-size: 18px; }
 
    .cols1-main .cols1_inner h1, .cols1-main .cols1_inner h2 {    font-size: 24px; }
    
    .cols3-img img{   text-align: center; width: 99%; height: 99%;} 
    .cols3_inner h1 {    font-size: 23px; }
    .cols3_inner h2 {  font-size: 19px; padding: 0 1px 0; }
    .cols3_inner h3 {  font-size: 23px;    padding: 7px 0px;}    
    .cols3_inner-green ul li { padding: 10px 5px 10px 5px; }
    
    .cols2-img img{   text-align: center; width: 99%;}  
    .cols2_inner h2 {  font-size: 19px; padding: 0 1px 0; }
    .cols2_inner h3 {  font-size: 23px;    padding: 7px 0px;}
    .cols2_inner table.subs  { font-size:13px;}
    
    .cols3_inner table.subs  { font-size:13px;}
 
    .cols75-25-img img{   text-align: center; max-width: 100%; }  
    .cols75-25_inner h1 {    font-size: 24px; padding: 0; }
    .cols75-25_inner h2, .cols75-25_inner h3 {    font-size: 20px; padding: 0 15px 0; }
    
    .cols75-25_inner h3 {    font-size: 28px;  padding: 7px 0px;}
    .cols75-25_inner p {   text-align: left; }
    .cols75-25-usp { padding: 0 2px 0px 2px; margin: 5px 0% 13px 0%; }
    .cols75-25-usp p { font-size: 16px; font-weight: bold; text-align: right; padding-bottom: 8px;}
    .cols75-25-usp .p2 { font-size: 16px; font-weight: bold; text-align: right; }
    
   
    .shopify-height { display:inline-block !important; height: 600px !important; }
    
    h1.shopify-buy__product__title { font-size: 13px !important; }


    .footer-quarterbox
    {
    width: 49%; /* 4 blocks to split into 2 groups of 2 */
    margin: 15px 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; 
                               background-color: #E2E2E2;; 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 (max-width:767px){   /* Hamburger Menu enters */
                            
    body
    {
        font-size: 19px;
        line-height: 1.5; 
        text-align: left;
    }
    .container { width: 100%; }
    
    .header-inner { height: 145px; width: 100%; margin: 0 auto; /*border-bottom: 1px solid #ebebeb;*/}
    .menu-banner { top: 40px; height: 40px; background-color: transparent; }
    .main { margin-top: 145px; padding: 0;}

    .logo {  width: 40%; position: absolute;  text-align: left;  font-size: 14px; top: 2px;  float: left;    bottom: auto;}
    .logo img {text-align: left; margin-top: 10px; margin-bottom: 2px;} 
    .logo p {margin: 0px; }
    
    .menu-banner { width: 60%; }
         
    a.CTAlink { font-size: 21px; }
    a.CTAlink:visited { font-size: 21px; }
    a.CTAlink:hover { font-size: 21px; }
    .p-left { text-align: center; padding-top: 0px; padding-bottom: 0px;}
    
            .topnav {max-width: 100%; /*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: 17px; line-height: 2.5; padding: 2px; 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: #666666;}
              .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;
              }
              
              
    .container { width: 100%; margin: 0 auto;}
   
    
    .heading { width: 99%; top: 0px; float: right; text-align: center; }
    .heading h1 { width: 95%; font-size: 25px;  text-align: center; padding: 1px 5px 1px 5px; margin: 0; }
      
    
    .review
        {
            margin: 30px 1% 0px 1%;
            padding: 0px 5px 0px 5px;
            font-size: 19px;
        }
    
    .hero-inner { text-align: center; padding: 0px 0px 0px 0px;}
    .hero-image img { width: 100%; }    
    
    .cols1-main .cols1_inner h1, .cols1-main .cols1_inner h2 {  text-align: center; font-size: 30px; padding: 0; }
    
     h1:before, h1:after { background-color: transparent;    }      
    .cols1-main .cols1_inner ul li::before   {    width: 1em;         }
    
    .cols3-main { padding: 0;} 
    .cols3_inner { padding: 0;}
    .cols3-noshadowbox { width: 100%;  padding: 0px 8px 10px 8px; margin: 0px 0px 40px 0px; }
    
    .cols3_inner h1 { text-align: center; font-size: 30px; padding: 0; }
    .cols3_inner h2 { text-align: center; font-size: 30px; padding: 0; margin: 20px 0px 0px 0px;}
    .cols3_inner h3 { text-align: center; font-size: 28px; padding: 0;} 
    .cols3_inner p { padding: 0; margin: 10px 0px 0px 0px;}
    .cols3-img img{ width: 99%; height: 99%;}
    
    .cols2_inner table.subs  { font-size:15px;} 
    .cols3_inner table.subs  { font-size:15px;}
       
    .cols2-main { padding: 0;} 
    .cols2_inner { padding: 0;} 
    .cols2-noshadowbox { width: 100%;  padding: 0px 5px 20px 8px; margin: 0; border-bottom: 30px solid #ffffff;} 
    .cols2-img img { margin-top: 10px; } 
    .cols2_inner h2 { text-align: center; font-size: 30px; padding: 0; margin: 20px 0px 0px 0px;}
    .cols2_inner h3 { text-align: center; font-size: 28px; padding: 0;}
    .cols2_inner p { padding: 0;}
    .cols2_inner ul { padding: 0; width: 80%;} 
    .cols2_inner ol { padding: 0; width: 80%;} 
    .cols2_inner ul li { padding: 5px 5px 5px 5px; } 
    .cols2_inner ul li a { font-size: 20px; text-align: center; padding: 5px 15px 5px 15px; }           
 
    .cols75-25-main{ padding: 0; }
    .cols75-25_inner { padding: 0;}
        
    .cols75-25_inner h1, .cols75-25_inner h2, .cols75-25_inner h3 {  text-align: center; font-size: 30px; padding: 0; }
 
    .cols75-25_inner p { padding: 0;}
    
    .cols75-25-widebox { width: 98%;  padding: 0; margin: 0px 1% 10px 1%;}  

    .cols75-25-narrowbox { width: 98%;  padding: 0; margin: 0px 1% 10px 1%;} 
    
    .cols75-25-img {  width: 100%; }
    
    .cols75-25-usp { width: 70%; padding: 0 5px 0px 5px; float: none; margin: 5px 0.1% 5px 15%; }
    .cols75-25-usp p { font-size: 25px; padding: 10px;  }
    .cols75-25-usp .p2 { font-size: 25px; padding: 10px; }

    .videosize {width: 100%; }
      
    .footer-main { padding: 0; }
   
    .footer-quarterbox {width: 49%; /* 4 blocks to split into 2 groups of 2 */
                        margin: 5px 0.3% 0px 0.3%;
                        padding: 0;
                        line-height: 1.8; 
                        font-size: 18px; }
                        
    .footer-quarterbox h3 { line-height: 1.5; font-size: 22px; margin: 10px 0px 15px 0px; }
    .footer-quarterbox a  { min-width: 48px; } 
    .icon { width: 35px; height: 35px; }
    .icon img  { width: 19px; height: 19px; }
    
    .copyright { font-size: 19px; min-width: 98%; margin: 10px 0 0 0; padding: 0; }
    .copyright p  { font-size: 19px; }
    .copyright a { font-size: 19px; }

    .subs  { width: 91%; text-align: left; vertical-align: top; padding: 5px 15px 5px 15px; border-collapse: separate; border-spacing: 3px 12px; 
                               background-color: #E2E2E2;; 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-center { text-align: center; padding: 15px 0px 20px 0px;}

}

@media screen and (max-width:479px)
{    
    body
    {
        font-size: 20px;
        line-height: 1.6; 
        text-align: left;
    }
        
        .topnav {margin-top: 1px; /*min-width: 200px; max-width: 98%; margin-right: 20px;*/ }
        .topnav a {font-size: 15px; line-height: 2; }

        .topnav.responsive .dropdown .dropbtn {  min-width: 290px; }
    
    .header-inner {  height: 128px;}
    .menu-banner {top: 5px; width: 70%; }
    .main { margin-top: 128px;}
    /*.menu-banner { top: 78px; height: 75px; width: 98%; max-width: 98%; }*/
    
    .logo img {text-align: left; margin: 3px; } 
    
    .logo { font-size: 10px; top: 1px;  float: left;    bottom: auto;}    

    
    .heading h1 { line-height: 22px; font-size: 22px; }
     
    a.CTAlink { font-size: 20px; }
    a.CTAlink:visited { font-size: 20px; }
    a.CTAlink:hover { font-size: 20px; }
    
    .cols1-main .cols1_inner h1 { width: 98%; font-size: 21px; margin-top: 10px; }
 
    .cols3_inner-green h2 { text-align: left;  font-family: 'Arial', sans-serif; font-weight:  bold; font-size: 21px; line-height: 1.2; color: #666666;  } 
    .cols3_inner-green ul li { margin: 0; padding: 0; font-size: 16px; line-height: 1.2; list-style: none; text-align: left; margin-bottom: 10px;}

    .cols3_inner h1 { width: 96%;  font-size: 24px; margin-top: 40px; }
    .cols3_inner h2 { width: 96%;  font-size: 25px; }
    .cols3_inner h3 { width: 96%;  font-size: 25px; }
    
    .cols2-noshadowbox { border-bottom: 15px solid #ffffff;} 
    .cols2_inner h2 { width: 96%;  font-size: 25px;  }
    .cols2_inner h3 { width: 96%;  font-size: 25px;  }    
    .cols2_inner ul { text-align: left; padding: 0; width: 99%;} 
    .cols2_inner ul li { padding: 8px 2px 8px 2px; } 
    .cols2_inner ul li a { font-size: 16px; text-transform: uppercase; text-align: center; padding: 5px 2px 5px 2px; }
 
    .cols75-25_inner h1, .cols75-25_inner h2, .cols75-25_inner h3 { width: 96%;  font-size: 24px; margin-top: 15px; }
 
    .cols75-25-usp { width: 90%; padding: 0 5px 0px 5px; float: none; margin: 5px 0.1% 5px 3%; }
    .cols75-25-usp p { font-size: 23px; }
    .cols75-25-usp .p2 { font-size: 23px; }
    
    .cols75-25_inner ol { margin: 3% 0px 0px 3%; }
    
    .footer-quarterbox
    { width: 93%; /* there are 4 blocks to show one underneath the other */  
      margin: 20px 3% 5px 4%;
      padding: 2px;  }
    
    .footer-quarterbox h3 { line-height: 1; font-size: 19px; margin: 10px 0px 15px 0px; }
    
    
    .copyright { font-size: 16px; }
    .copyright p  { font-size: 16px; }
    .copyright a { font-size: 16px; }
    
    .form-inputbox { width: 220px; }   
    .form-button { margin: 10px; font-size: 17px;  }

}

    
@media screen and (max-width:360px)
{    
    html {scroll-padding-top: 90px; }
    
    .header-inner { height: 128px; }
    
    .main { margin-top: 128px;}

}