/************************************************************************************ 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;} .noslide h3 { color: #eee; padding: 0;} #footer .four, #footer .row .four {width:100%;margin-bottom:20px; float:none;} .newsmargin { margin-left: 0px;} } @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% } .nav-bar { height:1px; margin-top: 30px; padding: 0; } .nav-bar > li { float: left; display: block; position: relative; padding: 10px 0; margin: 0 7px 0 0;line-height:10px;} ul.flyout li a, .nav-bar li ul li a {margin:0px;height:100%;} .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;} #subheader p { text-align: center;} p.right {float:none;} } @media screen and (min-width: 601px) { /* ensure #nav is visible on desktop version */ /* styles for desktop */ .tinynav { display: none } } /************************************************************************************ SUPERFISH *************************************************************************************/ @media screen and (max-width: 800px) { .tinynav { display: block } #main-menu{ display: none } .headermenu.columns{ padding: 0;float:none !Important;width:100% !Important;} .headerlogo {width:100% !Important; z-index: 2; position: relative;} .columns .headerlogo {padding-bottom:0;} .fitcarousel {width:81%;overflow:hidden;} .textmenu { margin-top: 8px !important;} #nav-wrap { margin-top: 0;} select.tinynav{ border: 0; background: #000; color: #fff; height: 50px; padding-left: 15px;font-weight:700;font-family: DroidSansRegular;} .row { min-width: 100%;} .logo { margin-top: 17px; margin-bottom: 17px;} } /************************************************************************************ 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;} }