/************************************************************************************
MAX-WIDTH 767
*************************************************************************************/
@media only screen and (max-width: 767px) { 
	input[type="text"].one, input[type="password"].one, input[type="date"].one, input[type="datetime"].one, input[type="email"].one, input[type="number"].one, input[type="search"].one, input[type="tel"].one, input[type="time"].one, input[type="url"].one, textarea.one, .row textarea.one { width: 100% !important }
	input[type="text"].two, .row input[type="text"].two, input[type="password"].two, .row input[type="password"].two, input[type="date"].two, .row input[type="date"].two, input[type="datetime"].two, .row input[type="datetime"].two, input[type="email"].two, .row input[type="email"].two, input[type="number"].two, .row input[type="number"].two, input[type="search"].two, .row input[type="search"].two, input[type="tel"].two, .row input[type="tel"].two, input[type="time"].two, .row input[type="time"].two, input[type="url"].two, .row input[type="url"].two, textarea.two, .row textarea.two { width: 100% !important }
	input[type="text"].three, .row input[type="text"].three, input[type="password"].three, .row input[type="password"].three, input[type="date"].three, .row input[type="date"].three, input[type="datetime"].three, .row input[type="datetime"].three, input[type="email"].three, .row input[type="email"].three, input[type="number"].three, .row input[type="number"].three, input[type="search"].three, .row input[type="search"].three, input[type="tel"].three, .row input[type="tel"].three, input[type="time"].three, .row input[type="time"].three, input[type="url"].three, .row input[type="url"].three, textarea.three, .row textarea.three { width: 100% !important }
	input[type="text"].four, .row input[type="text"].four, input[type="password"].four, .row input[type="password"].four, input[type="date"].four, .row input[type="date"].four, input[type="datetime"].four, .row input[type="datetime"].four, input[type="email"].four, .row input[type="email"].four, input[type="number"].four, .row input[type="number"].four, input[type="search"].four, .row input[type="search"].four, input[type="tel"].four, .row input[type="tel"].four, input[type="time"].four, .row input[type="time"].four, input[type="url"].four, .row input[type="url"].four, textarea.four, .row textarea.four { width: 100% !important }
	input[type="text"].five, .row input[type="text"].five, input[type="password"].five, .row input[type="password"].five, input[type="date"].five, .row input[type="date"].five, input[type="datetime"].five, .row input[type="datetime"].five, input[type="email"].five, .row input[type="email"].five, input[type="number"].five, .row input[type="number"].five, input[type="search"].five, .row input[type="search"].five, input[type="tel"].five, .row input[type="tel"].five, input[type="time"].five, .row input[type="time"].five, input[type="url"].five, .row input[type="url"].five, textarea.five, .row textarea.five { width: 100% !important }
	input[type="text"].six, .row input[type="text"].six, input[type="password"].six, .row input[type="password"].six, input[type="date"].six, .row input[type="date"].six, input[type="datetime"].six, .row input[type="datetime"].six, input[type="email"].six, .row input[type="email"].six, input[type="number"].six, .row input[type="number"].six, input[type="search"].six, .row input[type="search"].six, input[type="tel"].six, .row input[type="tel"].six, input[type="time"].six, .row input[type="time"].six, input[type="url"].six, .row input[type="url"].six, textarea.six, .row textarea.six { width: 100% !important }
	input[type="text"].seven, .row input[type="text"].seven, input[type="password"].seven, .row input[type="password"].seven, input[type="date"].seven, .row input[type="date"].seven, input[type="datetime"].seven, .row input[type="datetime"].seven, input[type="email"].seven, .row input[type="email"].seven, input[type="number"].seven, .row input[type="number"].seven, input[type="search"].seven, .row input[type="search"].seven, input[type="tel"].seven, .row input[type="tel"].seven, input[type="time"].seven, .row input[type="time"].seven, input[type="url"].seven, .row input[type="url"].seven, textarea.seven, .row textarea.seven { width: 100% !important }
	input[type="text"].eight, .row input[type="text"].eight, input[type="password"].eight, .row input[type="password"].eight, input[type="date"].eight, .row input[type="date"].eight, input[type="datetime"].eight, .row input[type="datetime"].eight, input[type="email"].eight, .row input[type="email"].eight, input[type="number"].eight, .row input[type="number"].eight, input[type="search"].eight, .row input[type="search"].eight, input[type="tel"].eight, .row input[type="tel"].eight, input[type="time"].eight, .row input[type="time"].eight, input[type="url"].eight, .row input[type="url"].eight, textarea.eight, .row textarea.eight { width: 100% !important }
	input[type="text"].nine, .row input[type="text"].nine, input[type="password"].nine, .row input[type="password"].nine, input[type="date"].nine, .row input[type="date"].nine, input[type="datetime"].nine, .row input[type="datetime"].nine, input[type="email"].nine, .row input[type="email"].nine, input[type="number"].nine, .row input[type="number"].nine, input[type="search"].nine, .row input[type="search"].nine, input[type="tel"].nine, .row input[type="tel"].nine, input[type="time"].nine, .row input[type="time"].nine, input[type="url"].nine, .row input[type="url"].nine, textarea.nine, .row textarea.nine { width: 100% !important }
	input[type="text"].ten, .row input[type="text"].ten, input[type="password"].ten, .row input[type="password"].ten, input[type="date"].ten, .row input[type="date"].ten, input[type="datetime"].ten, .row input[type="datetime"].ten, input[type="email"].ten, .row input[type="email"].ten, input[type="number"].ten, .row input[type="number"].ten, input[type="search"].ten, .row input[type="search"].ten, input[type="tel"].ten, .row input[type="tel"].ten, input[type="time"].ten, .row input[type="time"].ten, input[type="url"].ten, .row input[type="url"].ten, textarea.ten, .row textarea.ten { width: 100% !important }
	input[type="text"].eleven, .row input[type="text"].eleven, input[type="password"].eleven, .row input[type="password"].eleven, input[type="date"].eleven, .row input[type="date"].eleven, input[type="datetime"].eleven, .row input[type="datetime"].eleven, input[type="email"].eleven, .row input[type="email"].eleven, input[type="number"].eleven, .row input[type="number"].eleven, input[type="search"].eleven, .row input[type="search"].eleven, input[type="tel"].eleven, .row input[type="tel"].eleven, input[type="time"].eleven, .row input[type="time"].eleven, input[type="url"].eleven, .row input[type="url"].eleven, textarea.eleven, .row textarea.eleven { width: 100% !important }
	input[type="text"].twelve, .row input[type="text"].twelve, input[type="password"].twelve, .row input[type="password"].twelve, input[type="date"].twelve, .row input[type="date"].twelve, input[type="datetime"].twelve, .row input[type="datetime"].twelve, input[type="email"].twelve, .row input[type="email"].twelve, input[type="number"].twelve, .row input[type="number"].twelve, input[type="search"].twelve, .row input[type="search"].twelve, input[type="tel"].twelve, .row input[type="tel"].twelve, input[type="time"].twelve, .row input[type="time"].twelve, input[type="url"].twelve, .row input[type="url"].twelve, textarea.twelve, .row textarea.twelve { width: 100% !important }
	label.right { text-align: left }
	.button { display: block }
	button.button,input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; }
	.button-group button.button,
	.button-group input[type="submit"].button { width: auto; padding: 10px 20px 11px; }
	.button-group button.button.large,
	.button-group input[type="submit"].button.large { padding: 15px 30px 16px }
	.button-group button.button.medium,
	.button-group input[type="submit"].button.medium { padding: 10px 20px 11px }
	.button-group button.button.small,
	.button-group input[type="submit"].button.small { padding: 7px 14px 8px }
	.button-group button.button.tiny,
	.button-group input[type="submit"].button.tiny { padding: 5px 10px 6px }
	.button-group.even button.button,
	.button-group.even input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; }
	dl.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
	dl.tabs.mobile dt,dl.tabs.mobile dd { float: none; height: auto; }
	dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }
	dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0 0; }
	.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; }
	.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; }
	.tabs.mobile dd a.active { border: none; background: #2ba6cb; color: #fff; margin: 0; position: static; top: 0; height: auto; }
	.tabs.mobile dd:first-child a.active { margin: 0 }
	dl.contained.mobile { margin-bottom: 0 }
	dl.contained.tabs.mobile dd a { padding: 18px 20px }
	dl.tabs.mobile + ul.contained { margin-left: -20px; margin-right: -20px; border-width: 0 0 1px 0; }
	.tooltip { font-size: 14px; font-size: 1.4rem; line-height: 1.4; padding: 7px 10px 9px 10px; }
	.tooltip > .nub,
	.tooltip.top > .nub,
	.tooltip.left > .nub,
	.tooltip.right > .nub { border-color: transparent transparent black transparent; border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent; top: -12px; left: 10px; }

}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { 
	.flex-video { padding-top: 0 }
	
}

/* Very large display targeting */
/* Standard (large) display targeting */
.show-for-small,
.show-for-medium,
.show-for-medium-down,
.hide-for-large,
.hide-for-large-up,
.show-for-xlarge { display: none !important }
.hide-for-xlarge,
.show-for-large,
.show-for-large-up,
.hide-for-small,
.hide-for-medium,
.hide-for-medium-down { display: block !important }
@media only screen and (min-width: 1441px) { 
	.hide-for-small,
	.hide-for-medium,
	.hide-for-medium-down,
	.hide-for-large,
	.show-for-large-up,
	.show-for-xlarge { display: block !important }
	.show-for-small,
	.show-for-medium,
	.show-for-medium-down,
	.show-for-large,
	.hide-for-large-up,
	.hide-for-xlarge { display: none !important }
}
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { 
	.hide-for-small,
	.show-for-medium,
	.show-for-medium-down,
	.hide-for-large,
	.hide-for-large-up,
	.hide-for-xlarge { display: block !important }
	.show-for-small,
	.hide-for-medium,
	.hide-for-medium-down,
	.show-for-large,
	.show-for-large-up,
	.show-for-xlarge { display: none !important }
}
/* Small display targeting */
@media only screen and (max-width: 767px) { 
	.show-for-small,
	.hide-for-medium,
	.show-for-medium-down,
	.hide-for-large,
	.hide-for-large-up,
	.hide-for-xlarge { display: block !important }
	.hide-for-small,
	.show-for-medium,
	.hide-for-medium-down,
	.show-for-large,
	.show-for-large-up,
	.show-for-xlarge { display: none !important }
}
/* Orientation targeting */
.show-for-landscape,
.hide-for-portrait { display: block !important }
.hide-for-landscape,
.show-for-portrait { display: none !important }
@media screen and (orientation: landscape) { 
	.show-for-landscape,
	.hide-for-portrait { display: block !important }
	.hide-for-landscape,
	.show-for-portrait { display: none !important }
}
@media screen and (orientation: portrait) { 
	.show-for-portrait,
	.hide-for-landscape { display: block !important }
	.hide-for-portrait,
	.show-for-landscape { display: none !important }
}
/* Touch-enabled device targeting */
.show-for-touch { display: none !important }
.hide-for-touch { display: block !important }
.touch .show-for-touch { display: block !important }
.touch .hide-for-touch { display: none !important }
/* Specific overrides for elements that require something other than display: block */
table.show-for-xlarge,
table.show-for-large,
table.hide-for-small,
table.hide-for-medium { display: table !important }
@media only screen and (max-width: 1279px) and (min-width: 768px) { 
	.touch table.hide-for-xlarge,
	.touch table.hide-for-large,
	.touch table.hide-for-small,
	.touch table.show-for-medium { display: table !important }
}
@media only screen and (max-width: 767px) { 
	table.hide-for-xlarge,
	table.hide-for-large,
	table.hide-for-medium,
	table.show-for-small { display: table !important }
}

/************************************************************************************
MAX-WIDTH 800
*************************************************************************************/
@media screen and (min-width: 600px) and (max-width: 800px) {  
	.row { width: 100%; max-width: 100%; min-width: 1px; margin: 0 auto; } 
	.ca-menu{padding:0; margin-left: 100px;}
	.ca-menu li{ width: 250px;}
 }
@media screen and (min-width: 600px) and (max-width: 800px) {  
 .ei-title h2,.ei-title h3 {}
}
 /************************************************************************************
CAROUSEL
*************************************************************************************/
@media screen and (max-width: 1024px) {
#testimonials {width:98% !important;}
#testimonials blockquote{width:98% !important;}
#testimonials {height:160px !important;}
    #testimonials blockquote{height:160px !important;}
}

@media screen and (max-width: 850px) {
.fitcarousel {width:97%;overflow:hidden;}
}
@media screen and (min-width: 470px) and (max-width: 480px) {  
.fitcarousel {width:89% !important;overflow:hidden;}
}
/************************************************************************************
MAX-WITH 480
*************************************************************************************/
@media only screen and (max-width: 480px) { 
	body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
	.column, .columns { width: auto !important; float: none; }
	.column:last-child, .columns:last-child { float: none }
	[class*="column"] + [class*="column"]:last-child { float: none }
	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both }
	.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten { margin-left: 0 !important }
	.push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto }
	.pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto }
	/* Mobile 4-column Grid */
	.row .mobile-one { width: 25% !important; float: left; padding: 0 15px; }
	.row .mobile-one:last-child { float: right }
	.row .mobile-one.end { float: left }
	.row.collapse .mobile-one { padding: 0 }
	.row .mobile-two { width: 50% !important; float: left; padding: 0 15px; }
	.row .mobile-two:last-child { float: right }
	.row .mobile-two.end { float: left }
	.row.collapse .mobile-two { padding: 0 }
	.row .mobile-three { width: 75% !important; float: left; padding: 0 15px; }
	.row .mobile-three:last-child { float: right }
	.row .mobile-three.end { float: left }
	.row.collapse .mobile-three { padding: 0 }
	.row .mobile-four { width: 100% !important; float: left; padding: 0 15px; }
	.row .mobile-four:last-child { float: right }
	.row .mobile-four.end { float: left }
	.row.collapse .mobile-four { padding: 0 }
	.push-one-mobile { left: 25% }
	.pull-one-mobile { right: 25% }
	.push-two-mobile { left: 50% }
	.pull-two-mobile { right: 50% }
	.push-three-mobile { left: 75% }
	.pull-three-mobile { right: 75% }
	.name {display:block;}
	.noleftmarg {padding:0px !important;}	
	.logo { margin-top: 20px;margin-bottom:0px;}
	.ei-slider {height:260px;}
	.responsiveslide {margin-left: 0px !important;width:100% !Important;height: 200px !important;}
	.newsmargin{margin-left:0px;}
	.floatright {float:none;}
	#footer h1 {padding-top:20px;}
	.back-top, .back-top a, .slide{display:none;}
	.left { float: none }	
	.right { float: right; }
	.ei-title h2,.ei-title h3 {}
	#testimonials {height:260px !important;}
    #testimonials blockquote{height:260px !important;}
	.noslide h3 {padding:0px;}
	.ca-menu li {width:100%;float:none;}
	.fitcarousel {width:81%;overflow:hidden;}
}


/************************************************************************************
MAX-WIDTH 240
*************************************************************************************/
@media screen and (max-width: 240px) { 
.row .mobile-one {width:45% !important;}
.row .mobile-three {width:55% !Important;}
.ca-menu, #footer {overflow:hidden;}
h1 {font-size:20px;}
#testimonials {height:250px !Important;}
.image_carousel {overflow:hidden;}
}

/* Add this block to assets/vendor/css/responsive.css
   (append at the end of the file).

   THE BUG:
   Every one of the 26 content page templates uses the OLD Foundation
   semantic grid classes -- "four columns", "six columns",
   "eight columns", "twelve columns" -- e.g.:
       <div class="six columns">...</div>
       <div class="four columns threeportofolio category ...">...</div>

   style.css defines these as fixed PERCENTAGE widths with no
   responsive behavior at all:
       .four  { width: 33.33333% }
       .six   { width: 50%      }
       .eight { width: 66.66667% }

   responsive.css already collapses the *newer* ".mobile-one/two/
   three/four" grid helpers at 480px, and collapses form inputs
   (input.four, input.six, etc.) to 100%, but it never touches the
   plain ".four/.six/.eight" DIV columns that the actual page content
   is built from. So on every content page -- Products, Platform,
   Portfolio 2/3/4, Consulting, Services, Business/Technology
   Solutions, etc. -- these columns stay locked at 33% / 50% / 66%
   width all the way down to a 320px phone screen, squeezing text,
   images and cards into a sliver of the viewport.

   THE FIX:
   - <= 768px (phones, tablets in portrait): every column stacks
     full width, one per row.
   - 769px - 980px (small tablets/laptops in a cramped window): the
     33%-wide ".four" columns (e.g. the 3-up product/portfolio grid)
     widen to 50% (2-up) instead of staying cramped at a third of
     the width. ".six" and ".eight" are already wide enough at this
     size and are left as-is.
   Isotope (used for the filterable Products/Portfolio grids) has
   built-in resize handling, so it re-lays-out automatically when
   these widths change -- no JS changes needed.
*/

/* -----------------------------------------------------------------
   CRITICAL: the base grid rule in style.css is:
       .row { width: 980px; max-width: 100%; min-width: 768px; margin: 0 auto; }
   That `min-width: 768px` forces every page's row wrapper to be at
   least 768px wide. The existing patches in this file only override
   it for 0-480px and 600-800px, leaving a 481-599px gap where a
   phone/small device is forced into a 768px-wide layout -- i.e.
   horizontal scrolling on EVERY page, site-wide, at those widths.
   This closes the gap (and is !important, so it safely wins over
   the base rule at all widths <= 767px regardless of source order).
-------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .row {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 768px) {
    .row .four.columns,
    .row .six.columns,
    .row .eight.columns {
        width: 100% !important;
        float: none !important;
    }
}

@media only screen and (min-width: 769px) and (max-width: 980px) {
    .row .four.columns {
        width: 50% !important;
    }
}
/* Add this block to assets/vendor/css/responsive.css
   (anywhere is fine, but logically near the existing
   "@media only screen and (max-width: 480px) { .ei-slider {height:260px;} }" rule).

   Fills the gap between the 480px mobile override and the default
   500px desktop height, so tablets / small laptops (481px-830px)
   don't get an oversized, awkward-looking slider. */
@media only screen and (min-width: 481px) and (max-width: 830px) {
    .ei-slider {
        height: 340px;
    }
    .ei-slider-large li img {
        height: 100%;
        object-fit: cover;
    }
}

/* Add this block to assets/vendor/css/responsive.css (append at the end,
   after the previous responsive-patch.css block).

   BUG 1 — testimonials overlapping into the footer, huge gaps between quotes
   -----------------------------------------------------------------
   responsive.css already contains these rules, left over from the OLD
   carousel-based testimonials markup (where JS showed one blockquote
   at a time inside a fixed-size viewport window):

       @media (max-width: 1024px) { #testimonials{height:160px!important}
                                     #testimonials blockquote{height:160px!important} }
       @media (max-width: 480px)  { #testimonials{height:260px!important}
                                     #testimonials blockquote{height:260px!important} }
       @media (max-width: 240px)  { #testimonials{height:250px!important} }

   The current template renders ALL testimonials as a plain stacked
   list (no carousel JS, nothing hides the others) -- but every
   blockquote AND the container are still being forced to a single
   fixed height with !important. Result: short quotes get padded out
   with dead space (the "gaps"), and longer ones get clipped and
   spill into whatever comes next in the DOM -- the footer -- which
   is the overlapping/bleeding text you're seeing.

   Fix: let both the container and each blockquote size to their own
   content. This must also use !important to beat the existing rules
   at equal specificity (last one in the cascade wins).

   BUG 2 — thin white sliver strip under the hero image
   -----------------------------------------------------------------
   `.ei-slider-thumbs` (the row of slide thumbnails under the main
   hero image) is never hidden or resized for mobile anywhere in the
   CSS. At narrow widths it's still there, just squeezed down to a
   thin, empty-looking strip. Hiding it on phones/small tablets is
   the standard fix for this slider (thumbnails aren't usable at
   that size anyway).
*/

@media screen and (max-width: 1024px) {
    #testimonials,
    #testimonials blockquote {
        height: auto !important;
    }
}

@media screen and (max-width: 850px) {
    .ei-slider-thumbs {
        display: none !important;
    }

    /* the large slide image can take the full slider height once the
       thumbnail strip below it is gone */
    .ei-slider-large {
        height: 100% !important;
    }
}