/* CSS Document */

html {
    font-size: 100%;
}


* { margin:0; padding:0; box-sizing: border-box;}

.intro{padding-top:90px;}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size:12px;
    background:#333333;
    }  


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    margin: 0;
}
h1 {
    font-family:'Catamaran', sans-serif;
    font-size: 47px;
    line-height: 1; /* 48 / 48 */
    margin-bottom: .5em; /* 24 / 48 */
    text-transform: initial!important;
}
h2 {
    font-size: 50px;
    color:#333333;
    font-family:'Catamaran', sans-serif;
    font-weight:500;
    line-height:1em;
}

h2.large{font-size:47px;}


h3{
    font-size: 24px; 
    line-height: 1; 
    margin-bottom: 15px; 
    font-weight:700;
    font-family:'Catamaran', sans-serif;
    color:#cccccc;
}
h4 {
        font-family:'Catamaran', sans-serif; line-height: 1em;
}
h5 {
    font-size: 12px;
    line-height: 1.333333333em;
    color:#666666;
    font-family:'Catamaran', sans-serif;
    text-transform:uppercase;
}
h6 {
    font-size: 1em; /* 16 */
    line-height: 1.5; /* 24 / 16 */
    margin-bottom: 1.5em; /* 24 / 16 */
}
p,
blockquote {
    font-size: 16px; 
    font-family:'Catamaran', sans-serif;
    line-height: 1.35em;
    padding-bottom: 15px;
}

a{text-decoration:none;
color:#99cf17;
}

img a:active {
    outline: none!important;
    border: none!important;}

p.intro{font-size:18px;}


.dark p{color:#ffffff;}
.dark h3{color:#99cc00;}
.light h3{color:#333333;}



body.index h2{font-size:47px;}


.fas{color:#99cc00!important; display:block; padding-right:4px;}

.fas.fa-times-circle{color:#666666!important;}


span.magenta{color:#ff00ff!important;}


/* 
=========================================================================
DARK
=========================================================================
*/


.dark h2{color:#ffffff; padding-bottom:10px;}

.dark h3{
color: #ffffff;
font-size: 32px;
padding-bottom: 3px;
font-weight: 500;
margin-bottom: 15px;
border-bottom: 1px solid #99cf17;
}


.dark h4{
color: #cccccc;
font-size: 20px;
padding-bottom: 30px;
font-weight: 500;
margin-bottom: 0;
text-transform:uppercase;
}


.dark h5{font-size: 12px;
color: #666666;
position: relative;
text-transform: uppercase;
margin-bottom: 15px;}

.dark h5:after{content: "";
position: absolute;
left: 0;
bottom: -3px;
height: 2px;
width: 110px;
border-bottom: 2px solid #99cf17;}


.dark p{ color:#cccccc; }




/* 
=========================================================================
LIGHT
=========================================================================
*/


.light h3{
color: #333333;
font-size: 32px;
padding-bottom: 3px;
font-weight: 500;
margin-bottom: 15px;
border-bottom: 1px solid #99cf17;
}




.half-fill{
    background: url(../images/50-50-bg.png) no-repeat #ffffff;
background-size: 50% 100%;
background-position: top right;

}







/* 
=========================================================================

EXTENSION LIST STYLES

=========================================================================
*/



.extension{
    width: 47%;
display: inline-block;
float: left;
border-bottom: 1px solid #4a4a4a;
padding-bottom: 30px!important;
margin-bottom: 30px;

    }


.extension:nth-of-type(odd) {
    margin-left: 5%;
}



.extension-list{
box-shadow: -1px 54px 34px -37px rgba(0,0,0,0.15) inset;
-webkit-box-shadow: -1px 54px 34px -37px rgba(0,0,0,0.15) inset;
-moz-box-shadow: -1px 54px 34px -37px rgba(0,0,0,0.105) inset;}


.extension h3{ border-bottom:0; }



/* 
=========================================================================

LISTS

=========================================================================
*/


.panel ul, .panel ol{ 
list-style-position: outside;
color: #878787;
font-size: 17px;
font-family: 'Catamaran', sans-serif;
font-weight: 500;
}



.panel li{
padding-bottom: 10px;
line-height: 1em;
text-indent: -1em;
padding-left: 1em;
}


.panel ul ul{padding-top:15px; list-style:none;}
.panel ul ul li{margin-left:0;}



.panel ul {
  list-style: none;
}

.panel li::before {
content: "•";
color: #99cf17;
padding-right: 7px;
padding-left: 4px;
font-size: 1em!important;
}

.panel ul ul li:before{content:""}


.panel .download li::before {
content: "";
color: #99cf17;
padding-right: 7px;
padding-left: 4px;
font-size: 1em!important;
}


.flexslider-testimonials li::before, .flexslider li::before, .flexslider-products li::before{content:""; }


.pricing{padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #4a4a4a; display:block;}
td.price{ font-size:20px; }
td.price span{color:#99cc00!important;}

td.divider-bar{width:100%;}

/* 
=========================================================================

Responsive Needs 

=========================================================================
*/

img{
    max-width:100%;
    height:auto;

}


.slicknav_menu {display:none;}
.mobile-logo{ display:none;}



/* 
=========================================================================
HRs
=========================================================================
*/


hr{
    display: block;
width: 100%;
color: #99cc00;
border-width: 0 0 2px 0;
border-bottom: solid #99cc00 1px;
margin-bottom: 20px;
margin-top: 20px;
}


hr.quarter{
    width: 100px;
    color: #99cc00;
border-width: 0 0 2px 0;
border-bottom: solid #99cc00 2px;
margin-bottom: 30px;
margin-top: 7px;
}



/* 
=========================================================================
Color Classes
=========================================================================
*/


.gray{color:#999999!important;}
.white{color:#ffffff!important;}
.lime{color:#99cc00!important;}




/* 
=========================================================================
Buttons
=========================================================================
*/

a, a:hover, input.btn,input.btn:hover{
-o-transition:      all .5s ease-in-out;
    -ms-transition:     all .5s ease-in-out;
    -moz-transition:    all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition:         all .5s ease-in-out;
}


a.btn{font-family:'Catamaran', sans-serif;}


a.btn.dark, input.btn, #unsub-submit{
padding: 7px 30px;
color: #99cc00;
font-weight: 600;
font-size: 12px;
border: 1px solid #99cc00;
-webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
text-decoration: none;
   display: inline-block;
   cursor: pointer;
display: inline-block;
margin-top: 20px;
background:#413b3b;
text-transform:uppercase;
}

a.btn.dark:hover, input.btn:hover,  #unsub-submit:hover {
    color:#413b3b;
    background:#ffffff!important;
}


a.btn.light{
padding: 7px 30px;
color: #ffffff!important;
font-weight: 600;
font-size: 12px;
border: 1px solid #99cc00;
-webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
text-decoration: none;
   display: inline-block;
   cursor: pointer;
display: inline-block;
margin-top: 20px;
background:#99cc00;
text-transform:uppercase;
}

a.btn.light:hover {
    color:#99cc00!important;
    background:#ffffff!important;

}



a.btn.slider{
padding: 7px 30px;
color: #ffffff;
font-weight: 600;
font-size: 12px;
border: 1px solid #99cc00;
-webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
text-decoration: none;
   display: inline-block;
   cursor: pointer;
display: inline-block;
margin-top: 20px;
background:#99cc00;
text-transform:uppercase;
}

a.btn.slider:hover {
    color:#99cc00!important;
    background:#ffffff!important;

}






/* 
=========================================================================
Padding 
=========================================================================
*/

.padtop, li.padtop{ padding-top:40px!important;}

.padtop20{padding-top:20px;}

.padbottom, p .padbottom{ padding:0 0 20px 0; margin-top:0;}

.nomargin{margin:0!important;}

.nopad{padding:0!important;}


/* 
=========================================================================
Backgrounds
=========================================================================
*/

.roadmap{background:url(../images/roadmap-bg.jpg) no-repeat center; background-size:cover;}
.white-fill{background:#ffffff;}

.panel.map-bg{background:url(../images/map-bg.jpg) no-repeat right top; margin:0;}









/* 
=========================================================================
HERO PICS
=========================================================================
*/

.trashflow-hero{ 
    background: url(../images/hero-trashflow.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.routing-hero{ 
    background: url(../images/header-images/header-routing.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-cloud-backups{ 
    background: url(../images/header-images/header-cloud-backups.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-teleroute{ 
    background: url(../images/header-images/header-teleroute.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.hero-landfill-management{ 
    background: url(../images/header-images/header-LandfillManagment.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-business-services{ 
    background: url(../images/header-images/header-Business-Solutions.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-avs-mapping{ 
    background: url(../images/header-images/header-AvsMapping.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-route-optimization{ 
    background: url(../images/header-images/header-RouteOptimization.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-offsite-backup{ 
    background: url(../images/header-images/header-OffSiteBackup.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-tech-support{ 
    background: url(../images/header-images/header-techsupport.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-trash-billing{ 
    background: url(../images/header-images/header-TrashBilling.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-about-us{ 
    background: url(../images/header-images/header-about-us.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-history{ 
    background: url(../images/header-images/header-history.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-billing-route-solutions{ 
    background: url(../images/header-images/header-route-billing-solutions.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-your-account{ 
    background: url(../images/header-images/header-your-account.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-verification-form{ 
    background: url(../images/header-images/header-verification-form.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-tf-v2-8{ 
    background: url(../images/header-images/header-tf-v2.8.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-tf-v3-0{ 
    background: url(../images/header-images/header-tf-v3.0.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-all-downloads{ 
    background: url(../images/header-images/header-all-downloads.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-remote-tools{ 
    background: url(../images/header-images/header-romote-tools.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-faq{ 
    background: url(../images/header-images/header-faq.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-demo{ 
    background: url(../images/header-images/header-demo.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.hero-container-tracking{ 
    background: url(../images/header-images/header-container-tracking.jpg) top right no-repeat #ffffff;
background-size: cover;

}



.hero-cloud-storage{ 
    background: url(../images/header-images/header-cloud-storage.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.hero-cloud{ 
    background: url(../images/header-images/header-cloud-services.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-contact{ 
    background: url(../images/header-images/header-contact-us.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-mailing-cass{ 
    background: url(../images/header-images/header-mailing-CASS.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.hero-material-tracking{ 
    background: url(../images/header-images/header-material-tracking.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-scale-interface{ 
    background: url(../images/header-images/header-scale-interface.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-tip-ticket{ 
    background: url(../images/header-images/header-tip-ticket.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-accounting-link{ 
    background: url(../images/header-images/header-techsupport.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-dispatch{ 
    background: url(../images/header-images/header-route-billing-solutions.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-printer-supplies{ 
    background: url(../images/header-images/header-tf-v3.0.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.hero-event-tracking{ 
    background: url(../images/header-images/header-tf-v2.8.jpg) top right no-repeat #ffffff;
background-size: cover;

}

.hero-networking{ 
    background: url(../images/header-images/header-techsupport.jpg) top right no-repeat #ffffff;
background-size: cover;

}


.hero-payments{
    background: url(../images/header-images/header-TrashBilling.jpg) top right no-repeat #ffffff; background-size: cover; font-size: 16px;

}

.info-box { 
    border: 3px solid #99cf17; 
    padding: 15px; 
    border-radius: 10px; 
    margin-top: 10px; 
    font-size: 14pt; 
} 
             
.info-box:hover { 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
} 
 
.info-box h2 { 
    color: #006100; 
    font-weight: bold; 
          font-size: 22px; 
} 
 
.info-box a {  
    font-weight: bold; 
          font-size: 20px; 
          display: block; 
          margin: 0 auto; 
          text-align: center; 
} 
                     
.info-box p { 
          font-size: 14px; 
}


/* 
=========================================================================
Header 
=========================================================================
*/

.header{
    width:100%; 
    padding:20px 0 0 0; 
    border-bottom:7px solid #ffffff; 
    z-index:99999999; 
    position:relative;
-webkit-box-shadow: 0px -65px 15px 67px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -65px 15px 67px rgba(0,0,0,0.75);
box-shadow: 0px -65px 15px 67px rgba(0,0,0,0.75);
position:fixed;

}

.logo{

width:35%;
float: left;
text-align: center;
height: 100%;
padding-top: 10px;
}

.logo img{max-width:270px;}

p.tagline{
font-size: 19px;
display: block;
font-weight: 500;
color: #99cc00;
text-transform: uppercase;

}







/* 
=========================================================================
INTROs
=========================================================================
*/






.intro h1{color:#333333; margin-bottom:0; font-weight:500;}

.intro h2{ color: #99cf17;
font-size: 25px;
padding-bottom: 20px; }

.intro h3{font-size:12px; color:#666666; position:relative; text-transform:uppercase;}
.intro h3:after{ content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 110px; border-bottom: 2px solid #99cf17;}

.intro h4{color:#3e4b18; font-size:20px; text-transform:uppercase; }

.intro p{padding-bottom:15px;}








/* 
=========================================================================
Panels
=========================================================================
*/


.panel {padding-top: 60px; padding-bottom:60px;}


.map-bg{}



.panel a:link, .panel a:active, .panel a:visited { color:#99cf17; }
.panel a:hover{ color:#ffffff; }







/*+++++++++++++++++++++++++
PRODUCT SLIDER 
+++++++++++++++++++++++++*/


.flexslider-products{padding:30px 0;}

.panel.products{background:#ffffff;}


.flexnav.products{background:#ffffff; margin-top:30px; display:inline-block;}

.flexnav.products .prod-icon{
    max-width: 100px;
margin: 0 auto;
}

.product-control-nav li {
color: #fff;
cursor: pointer;
float: left;
margin: 7px 0 0 0;
padding: 25px 50px;
vertical-align: middle;
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.5em;
}

.product-control-nav li:last-child {
  
}

.product-control-nav .flex-active {
margin: 0;
background: url(../images/icon-product-hover-fill.jpg);
background-size: 100% 100%;
border-bottom: 4px solid #99cc00;
border-top: 4px solid #99cc00;
border-bottom: 7px solid #99cc00;
}

.product-control-nav {
    width: 100%;
    text-align: center;
}
.product-control-nav li {
    zoom: 1;
    *display: inline;
}

.product-control-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}


.slide_text-product {
background-color: transparent;
background-color: rgba( 0, 0, 0, 0.5 );
color: #fff;
display: block;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000000, endColorstr=#99000000 );
padding: 1em;
position: relative;
width: 100%;
zoom: 1;
/* top: 50%; */
/* -webkit-transform: translateX(-50%); */
/* transform: translateY(-50%); */
text-align: center;
}

.prod-desc{
color: #000000;
font-weight: 900;
font-size: 16px;
text-transform:uppercase;
}

ul.products .prod-desc {
    padding-top:60px;

}

.prod-desc h3{text-transform:none;}


ul.product-specs{
    list-style-type: none;
    list-style-position: inside;
    color:#ffffff;
    text-transform:none;

}

ul.product-specs li{padding-left:20px; font-size:20px; font-weight:500; line-height: 1.1em;
padding-bottom: 15px;}

ul.product-specs li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #99cc00; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}





/*+++++++++++++++++++++++++
Tech support panel
+++++++++++++++++++++++++*/


.panel.tech{background:#ffffff;}

.flexslider-testimonials{
position: relative;
zoom: 1;
width: 100%;
margin: 0 auto;
z-index: 5000;
}

.flexslider-testimonials ol.flex-control-nav{
    width: auto;
    text-align: center;
    display: inline-block;
}

.flexslider-testimonials .flex-control-nav li{
    padding:10px; width:auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background:none;
    }
.flexslider-testimonials .flex-control-paging li a{width: 20px; height: 10px;}
.flexslider-testimonials .flex-control-nav .flex-active {border:none;}

.flexslider-testimonials .flex-control-paging{display:block;}

.slides.quotes{
padding:30px;
zoom: 1;
text-align:center;
-webkit-box-shadow: inset 0px 0px 60px 0px rgba(0,0,0,0.38);
-moz-box-shadow: inset 0px 0px 60px 0px rgba(0,0,0,0.38);
box-shadow: inset 0px 0px 60px 0px rgba(0,0,0,0.38);
background:url(../images/tf-arrow.png) no-repeat center;
background-size:50% auto;
}



.quote-box{position:relative;}

.quote-box em{color: #99cc00;
padding-right: 3px;
font-size: 44px;
font-style: normal;
line-height: 1px;}

.quote-box span{display:block; padding-top:10px;}

.quote-text{padding:20px; font-size:20px; font-weight:900; color:#413b3b; line-height:1.5em;}









/*+++++++++++++++++++++++++
Boxes panel
+++++++++++++++++++++++++*/






.box1{background:url(../images/box-1.jpg) no-repeat center; background-size:cover;}
.box2{background:url(../images/box-2.jpg) no-repeat center; background-size:cover;}
.box3{background:url(../images/box-3.jpg) no-repeat center; background-size:cover;}

.box1, .box2, .box3{padding:20px 30px;}





/*+++++++++++++++++++++++++
Contact panel
+++++++++++++++++++++++++*/

.panel.contact{background:#d1d2d4; padding-top:0; padding-bottom:0;}
.contactpic{background:url(../images/contact-bg.jpg) no-repeat right; padding-top:80px; padding-bottom:80px; background-size:contain;}


/* 
=========================================================================
Lightbox styles
=========================================================================
*/


.lightbox{padding:0 20px; padding-bottom:30px;}

.lightbox h3{color: #99cf17;
font-size: 20px;
font-weight: 100;
border-bottom: 1px solid #808381;}





.lightbox a {opacity:.5;}
.lightbox a:hover{opacity:1;}



.lightbox.thumbs{padding-left:0;}
.lightbox.thumbs a{ width:19%;  padding-right:1%; display:inline-block;}





/* 
=========================================================================
Supply page styles
=========================================================================
*/



.printer-supplies{

padding-bottom: 30px;
width: 100%;
float: left;
display: inline-block;
border-bottom: 1px solid #666666;
margin-bottom: 50px;


}

.printer-supplies h4{
    font-size: 20px;
color: #ffffff;
padding-bottom: 10px;
padding-top: 15px;
}

p.price{
color: #99cf17;
font-weight: 700;
font-size: 1;
padding: 10px;
border: 1px solid #666666;
display: block;
margin-bottom: 5px;
}






/*+++++++++++++++++++++++++
Footer
+++++++++++++++++++++++++*/


.footer{ padding:40px 0; box-shadow: -1px 54px 34px -37px rgba(0,0,0,0.15) inset;
-webkit-box-shadow: -1px 54px 34px -37px rgba(0,0,0,0.15) inset;
-moz-box-shadow: -1px 54px 34px -37px rgba(0,0,0,0.105) inset;}

.footer p{color:#ffffff; text-align:right;}
.footer h3{color:#bebcbc; font-size:16px; line-height:1em; margin:0; text-align:right; text-transform:uppercase;}
.footer h4{color:#ffffff; font-weight:900; font-size:16px; line-height:1em; text-align:right;}



.copyright{float:left; font-size:10px!important;}
.copyright p{color:#666666!important;}

.privacy{float:left; padding-left:20px; font-size:10px; color:#666666!important;}
.privacy a{color:#99cc00!important;}
.privacy a:hover{color:#ffffff!important;}

.legal{ padding-top:20px; margin-top:20px; border-top:1px solid #99cc00; padding-bottom:10px; }

.ms{float:right; font-family:'Catamaran', sans-serif; color:#99cc00; font-size:14px;}

.ms .fab{font-size: 18px;
position: relative;
top: 3px;
margin: 0 5px 0 5px;}

.address-line{padding-bottom:20px;}
.address-line p{padding-bottom:0;}





/*
==========================================================
download form
==========================================================
*/


.download_form{font-family: 'Catamaran', sans-serif; font-size:15px;}


.download_form fieldset{ padding:20px; border:1px solid #666666;}

.download_form legend {
    font-size: 22px;
padding: 0 10px;
color: #99cf17;
font-weight:100;
text-transform:uppercase;
}


.download_form span, .download_form label{color:#ffffff;}

.download_form input:matches([type="radio"]){width:25px;}





/*
==========================================================
Surreal
==========================================================
*/

.repeatable{padding-bottom:30px;}


html [data-cms-editable]  .extension[style] {height:auto!important;}
















/*
==========================================================
Media Queries
==========================================================
*/


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

    .logo{width:80%; text-align:left;}


}



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

.footer .one-fifth.columns{padding-bottom:10px;}

.header{position:relative;}

.panel {
padding-top: 30px;
padding-bottom:30px;
}


.half-fill{background-size: 100% 50%;
background-position: bottom right;}


/* MAIN slider */
        .flex-control-nav li[style]{height:auto!important; width:100%!important;}

        .slide_text{

position: relative;
width: 100%;
zoom: 1;
-webkit-transform: none;
transform: none;
text-align: center;
        }

.slide_title {font-size:32px; padding-bottom:0;}
.slide_text{ background:none; }
.slidenav-title{padding:0;}
.slidenav-sub{display:none;}
.slide_byline{line-height:1.5em;}
.flex-control-nav li{padding:15px;}
p.tagline{width:100%;}



/* products slider */

.flexnav.products {width:100%; margin-top:0; padding-bottom:10px;}
.product-control-nav li {padding: 5px;}
.product-control-nav li[style]{height:auto!important; width:20%;}

.flexnav.products .prod-desc{display:none;}

.flexslider-products .prod-icon{display:none}
ul.products .prod-desc{padding-top:0;}

ul.product-specs li{font-size:16px;}
.prod-desc h3{font-size:20px; line-height:1.2em;}

.boxes > .container > div{margin-top:10px; margin-bottom:5px;}


.contactpic{background-position:100px;}


/* footer */

.footer p{text-align:left;}

.footer .two.columns{ width:50%!important; }

.footer h4, .footer h3{text-align:left;}


/* comparison chart */

.comparison-chart li{width:33%;}
.comparison-chart button{padding:10px 0;}


.extension{width:100%; margin-left:0!important;}


.demo-download{padding-top:50px; margin-top:50px; }


.logo{width:100%;}
p.tagline{font-size:16px;}

} 







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


h2{font-size:38px;}

.logo img{max-width:200px;}

p.tagline{font-size:14px;}

} 




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

.comparison-chart button{font-size:11px;}

}

#unsub-box{
    position: relative;
    top: 100px;
    width: 600px;
    height: 200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.unsub-footer{
    position: fixed;
    bottom: 0;
    width:100%;
}

#unsubbed-text{
    position: relative;
    top: 300px;
    width:100%;
    text-align: center;
}