@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@charset "utf-8";
/* CSS Document */

/*********************************************************/
/************************GENERAL**************************/
/*********************************************************/

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

body {background-image: url(../i/misc/site-background.png)}

#canvas {width: 1000px; margin-right: auto; margin-left: auto; background-color: #ffffff; font-size: 16px;}

@media screen and (max-width: 1023px) {html {-webkit-text-size-adjust:100%;}} /* Helps fix text zoom issue when rotating mobile devices. */

@media screen and (max-width: 999px) {#canvas {width: 100%;}}


/*********************************************************/
/**********************UTILITY BAR************************/
/*********************************************************/

#utility-bar-con {height: 43px; line-height: 43px; background-color: #7bb513; color: #ffffff; font-family: Open Sans, Arial, Helvetica, sans-serif; font-size: 15px;}
#utility-bar-con a {color: #ffffff;}
#utility-bar-con a:hover {color: #07767d;}
#utility-bar-con .utility-location-links {float: left; margin-left: 27px; margin-right: 73px;}
#utility-bar-con .utility-contact-info {float: left;}
#utility-bar-con .utility-text-resizer {float: right; background-color: #14abb5; width: 60px; height: 43px; text-align: center; margin-right: 28px;}
#utility-bar-con .utility-text-resizer a {cursor: pointer;}
#utility-bar-con .utility-text-resizer a:hover {color: #ffffff;}
#utility-bar-con .utility-text-resizer .increase-font {font-size: 20px; margin-right: 5px;}
#utility-bar-con .utility-text-resizer .reset-font {font-size: 15px; margin-right: 5px;}
#utility-bar-con .utility-text-resizer .decrease-font {font-size: 11px;}

@media screen and (max-width: 999px) {
#utility-bar-con .utility-location-links {margin-right: 0;}
#utility-bar-con .utility-contact-info {float: right; margin-right: 27px;}
#utility-bar-con .utility-text-resizer {display: none;}
}

@media screen and (max-width: 767px) {
#utility-bar-con {text-align: center;}
#utility-bar-con .utility-location-links {display: none;}
#utility-bar-con .utility-contact-info {float: none; margin-right: 0;}
}

@media screen and (max-width: 449px) {
#utility-bar-con .utility-contact-info .utility-email {display: none;}
}

/*********************************************************/
/*******************LOGO & PROMO BAR**********************/
/*********************************************************/

#logo-bar-con {height: 104px; padding: 0 28px;} 
#logo-bar-con img.logo {margin-top: 13px;}
#logo-bar-con .header-promo {float: right; width: 453px; height: 63px; background-color: #e0edb5; border: 1px solid #14abb5; margin-top: 20px; padding: 0 0 0 10px;}
#logo-bar-con .header-promo p {font-weight: bold; font-size: 16px; color: #8d9a00; font-family: "Myriad-Pro-Semi-Condensed";}
#logo-bar-con .header-promo p.promo-text {width: 275px; margin-top: 5px; line-height: 20px; text-decoration: none;}
#logo-bar-con .header-promo p.call-to-action {color: #07767d; text-decoration: underline; position: relative; left: 143px; bottom: 10px; overflow: hidden;}
#logo-bar-con .header-promo img {float: right;}

@media screen and (max-width: 767px) {
#logo-bar-con {text-align: center;}
#logo-bar-con .header-promo {display: none;}
}

/*********************************************************/
/********************NAVIGATION BAR***********************/
/*********************************************************/

#nav-bar-con {border-top: 1px solid #dededd; border-bottom: 1px solid #dededd; background-color: #F5F5F5;}

#main-menu {height: 41px; line-height: 40px; font-family: Open Sans, Arial, Helvetica, sans-serif; letter-spacing: -0.1px;}
#main-menu > li {float: none; display: inline-block;}

.sm,.sm *, .sm *:before, .sm *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.sm {margin:0; padding:0;}
.sm ul {display:none; margin:0; padding:0; background: #ffffff;}
.sm li {display:block; margin:0; padding:0; position:relative;}
.sm a {position:relative; display:block; padding-right:58px; text-decoration:none; background: #ffffff; color: #002f37; font-size: 16px; border-left: 8px solid transparent;}
.sm a:hover {padding-right:58px; text-decoration:none; color: #2A3F52; font-size: 16px; text-shadow: none; border-left: 8px solid transparent;}
.sm a.current {background:#006892; color:white;}
.sm a span.sub-arrow {position: absolute; top:50%; margin-top: -17px; left: auto; right: 4px; width: 34px; height: 34px; overflow: hidden; font: bold 16px/34px monospace!important; text-align: center;} 
.sm a.highlighted span.sub-arrow:before {display: block; content:'-';}
.sm li ul li {padding-left: 0px; border-bottom: 1px solid #dededd; line-height: 26px;}
.sm li ul li a {font-size: 16px; text-transform: none; padding: 6px 11px;}
.sm li ul li a:hover {font-size: 16px; text-transform: none; padding: 6px 11px;}


@media screen and (min-width: 1000px) {
	
.responsive-menu-button {display:none;}
#main-menu.collapsed, .sm {display:-webkit-box!important; display:-moz-box!important; display:-ms-flexbox!important; display:-webkit-flex!important; display:flex!important;  -ms-flex-pack: justify; -webkit-justify-content:space-between; justify-content:space-between; padding: 0 15px;} 	
.sm ul {position:absolute; border:1px solid #dededd; border-bottom:none; padding:0; background:white;}
.sm a {background:transparent!important; white-space:nowrap; border:1px solid #F5F5F5; border-top: none; border-bottom:none; padding:0 11px 0 11px;}
.sm a:hover, .sm a.highlighted {background: #ececeb!important; color:#2A3F52!important; border: 1px solid #dededd;  border-top: none; border-bottom:none; padding:0 11px 1px 11px;}
.sm .no-sub a:hover, .sm .no-sub a.highlighted {border-bottom: 1px solid #dededd;}
.sm a span.sub-arrow, .sm a.highlighted span.sub-arrow:before {display:none;}
.sm ul ul {background:#ffffff;}
.sm ul a, .sm ul a:hover, .sm ul a.highlighted {border:0 !important; padding:9px 23px;}
	
}

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

#nav-bar-con {border-color: #a7b9c2;}
.responsive-menu-button {background-color:#F5F5F5; text-align:center; height:40px; box-sizing: content-box;}
.responsive-menu-button a#menu-button {display: block; width: 101px; margin: 0 auto 0 auto;}
.responsive-menu-button p {margin: 5px 6px 0 0; float: left; font-family: "myriad-pro", sans-serif; font-size: 22px; color: #063a43; text-transform: uppercase; text-decoration: none;}
.responsive-menu-button .hamburger {float: left; margin-top: 8px;}
.responsive-menu-button .hamburger div {width: 30px; height: 4px; background-color: #063a43; margin: 5px 0;}
.responsive-menu-button .hamburger div.top-bun {margin-top: 0;}
/*.responsive-menu-button img.hamburger {display:inline; height:22px; padding-top:10px; margin-left:10px;}*/
#main-menu {text-align:left; padding-right:0px; height: auto;}
#main-menu.collapsed {display:none;} 
#main-menu > li {display:block; margin-right:0;}
#main-menu > li > a {background-color: #f7f7f7;}
.sm li {padding-left:0px; border-bottom:#a7b9c2 1px solid;}
.sm li:first-child {border-top:#a7b9c2 1px solid;}
.sm li:last-child {border-bottom: none;}
.sm li ul li:last-child {border-bottom: none;}
	
}


/*********************************************************/
/*************************FOOTER**************************/
/*********************************************************/

#footer-top {font-family: Segoe, "Segoe UI", Open Sans, "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; color: #ffffff; background-color: #4c5562; width: 100%; overflow: hidden; padding: 15px 12px 18px 12px; border-top: 10px solid #F5F5F5;}
#footer-top p {margin-bottom: 20px;}
#footer-top p.last {margin-bottom: 0;}
#footer-top h2 {font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; font-size: 20px; margin-bottom: 15px;}
#footer-top h3 {font-size: 16px;}
#footer-top a {color: #a0ce4e;}
#footer-top iframe {border-radius: 5px;}
_:-ms-fullscreen, :root #footer-top iframe {border-radius: 0px;} /* Addresses odd IE11 bug where Facebook header image wasn't displaying with border radius.*/
#footer-top .footer-column {padding-left: 15px; padding-right: 15px;}
#footer-top .footer-column.col-1 {float: left; width: 28%; font-size: 16px;}
#footer-top .footer-column.col-1 h2 {margin-bottom: 10px;}
#footer-top .footer-column.col-2 {float: left; width: 36%;}
#footer-top .footer-column.col-3 {float: left; width: 36%;}

#footer-bottom {font-family: Segoe, "Segoe UI", Open Sans, "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; color: #ffffff; background-color: #373d47; padding: 15px 30px 15px 30px; text-align: right; font-size: 16px;}
#footer-bottom a {color: #ffffff;}

@media screen and (max-width: 999px) {
#footer-top {text-align: center;}
#footer-top .footer-column.col-1 {width: 100%;}
#footer-top .footer-column.col-1 .location-info {float: left; width: 50%;}
#footer-top .footer-column.col-2 {width: 50%;}
#footer-top .footer-column.col-3 {width: 50%;}
}

@media screen and (max-width: 899px) {
#footer-top .footer-column {padding-left: 3px; padding-right: 3px;}
}

@media screen and (max-width: 600px) {
#footer-top {text-align: left;}
#footer-top .footer-column.col-1 {margin-bottom: 30px;}
#footer-top .footer-column.col-1 .location-info {float: none; width: 100%;}
#footer-top .footer-column.col-2 {width: 100%; margin-bottom: 30px;}
#footer-top .footer-column.col-3 {width: 100%;}
#footer-bottom {text-align: center;}
#footer-bottom span {display: block;}
#footer-bottom span.divider {display: none;} 
}


/*********************************************************/
/**********************HOME BANNER************************/
/*********************************************************/

#banner-con img {float: left; width: 65%;}
#banner-con .banner-text {float: left; width: 35%; height: 296px; background-color: #14abb5; color: #ffffff; font-family: Segoe, "Segoe UI", Open Sans, "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 16px; line-height: 22px; padding: 20px 15px 0 15px;}
#banner-con .banner-text h1 {font-size: 19px; margin-bottom: 16px; font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;}
#banner-con .banner-text p {margin-bottom: 16px;}

@media screen and (max-width: 999px) {
#banner-con {height: auto; background-color: #14abb5; overflow: hidden;}
#banner-con img {width: 57%;}
#banner-con .banner-text {width: 43%; height: auto;}
}

@media screen and (max-width: 970px) {
#banner-con .banner-text p.second {display: none;}
}

@media screen and (max-width: 767px) {
#banner-con img {float: none; width: 100%;}
#banner-con .banner-text {float: none; width: 100%; padding-top: 10px;}
#banner-con .banner-text h1 {margin-bottom: 7px;}
}


/*********************************************************/
/**********************HOME CONTENT***********************/
/*********************************************************/

#home-content {font-family: Segoe, "Segoe UI", Open Sans, "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; color: #474747; width: 100%; overflow: hidden; padding: 15px 30px 15px 30px;}
#home-content .feature-box-1 {float: left; width: 29%; padding-right: 1.9%; margin-right: 3.6%; border-right: 1px solid #e1e1e1;}
#home-content .feature-box-2 {float: left; width: 40.8%; padding-right: 3%; margin-right: 3.6%; border-right: 1px solid #e1e1e1;}
#home-content .feature-box-3 {float: left; width: 23%;}
#home-content .feature-box-3 p {margin-top: 20px; margin-bottom: 5px; font-weight: bold; line-height: 18px; color: #6a6a6a;}
#home-content h2 {font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; font-size: 20px; margin-bottom: 5px; color: #004b58;}
#home-content p {margin-bottom: 20px;}
#home-content a {color: #07767d; /*color: #6a9c11; font-weight: bold;*/}
#home-content a:hover {color: #a0ce4e;}
#home-content ul {list-style: none;}
#home-content ul li {margin-bottom: 5px;}

@media screen and (max-width: 999px) {
#home-content .feature-box-1 {width: 42.6%;}
#home-content .feature-box-2 {width: 53.8%; padding-right: 0; margin-right: 0; border-right: none;}
#home-content .feature-box-3 {display: none;}
}

@media screen and (max-width: 599px) {
#home-content {padding-right: 15px; padding-left: 15px;}
#home-content .feature-box-1 {width: 100%; float: none; padding-right: 0; margin-right: 0; border-right: none;}
#home-content .feature-box-2 {width: 100%; float: none;}
}


/*********************************************************/
/*******************SECONDARY TEMPLATE********************/
/*********************************************************/

#secondary-content {padding: 20px 28px 14px; 28px; font-family: Segoe, "Segoe UI", Open Sans, "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; color: #474747; overflow: hidden;}
#secondary-content a {color: #07767d;}
#secondary-content .banner {margin-bottom: 15px;}
#secondary-content #main {float: left; width: 676px; padding-right: 10px; overflow: hidden;}
#secondary-content #main h1 {color: #004b58; font-family: "myriad-pro"; font-weight: normal; font-size: 31px; margin-bottom: 15px;}
#secondary-content #main h2 {font-weight: bold; font-size: 19px; margin-top: 28px; margin-bottom: 8px;}
#secondary-content #main h2.starts-page {margin-top: 14px;}
#secondary-content #main p {margin-bottom: 11px; line-height: 23px;}
#secondary-content #main ul {margin-left: 30px; margin-bottom:  14px;}
#secondary-content #main .new {color: red;}

#secondary-content #main .fluidvids {margin-top: 20px; margin-bottom: 20px;}

#secondary-content #main .images-container {display: inline-block;}
#secondary-content #main .images-container .image {float: left; margin-right: 25px;}
#secondary-content #main .images-container .image:last-child {margin-right: 0;}
#secondary-content #main .images-container .image p.caption {font-weight: bold; margin-bottom: 0;}

#secondary-content #sidebar {float: right; width: 224px;}
#secondary-content #sidebar .sidebar-promo {background-color: #ebf5f5; border: 1px solid #00a6b2; text-align: center; height: 190px; margin-bottom: 23px;}
#secondary-content #sidebar .sidebar-promo .promo-title {display: block; background-color: #4ebcc4; color: white; height: 33px; line-height: 33px; font-family: "myriad-pro-semi-condensed", Arial Narrow, "Abadi MT Condensed", Arial, sans-serif; font-weight: 600; font-size: 17px;letter-spacing: 0.2px; margin-bottom: 0; padding: 0 8px;}
#secondary-content #sidebar .sidebar-promo .promo-details {padding: 12px 8px 0 8px; font-family: "myriad-pro", Arial Narrow, "Abadi MT Condensed", Arial, sans-serif; font-size: 17px; font-size: 16px\9; line-height: 25px;} /*Second font size statement in previous style is an IE8 hack.*/
#secondary-content #sidebar .sidebar-promo .promo-details span {display: block;}
#secondary-content #sidebar .sidebar-promo .promo-details a {font-weight: 600;}
#secondary-content #sidebar h3 {font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; font-size: 18px; margin-bottom: 5px; color: #004b58;}
#secondary-content #sidebar p {margin-bottom: 20px;}
#secondary-content #sidebar p.subheader {margin-top: 20px; margin-bottom: 5px; font-weight: bold; line-height: 18px; color: #6a6a6a;}
#secondary-content #sidebar ul {list-style: none;}
#secondary-content #sidebar ul li {margin-bottom: 5px;}

/*Hack that targets IE browsers. Used to hide sidebar promo text while Typekit fonts are loading to prevent FOUT.*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.wf-loading #secondary-content #sidebar .sidebar-promo .promo-title, .wf-loading #secondary-content #sidebar .sidebar-promo .promo-details {display: none;}
}

/*Hack that targets Edge browsers. Used to hide sidebar promo text while Typekit fonts are loading to prevent FOUT.*/
@supports (-ms-ime-align:auto) {
.wf-loading #secondary-content #sidebar .sidebar-promo .promo-title, .wf-loading #secondary-content #sidebar .sidebar-promo .promo-details {display: none;}
}

@media screen and (max-width: 999px) {
#secondary-content #main {width: 69%;}
}

@media screen and (max-width: 899px) {
#secondary-content {padding: 20px 15px 0 15px;}
#secondary-content .banner {width: 100%;}
#secondary-content #main {width: 100%; float: none; padding-right: 0; margin-bottom: 10px; overflow: hidden;}
#secondary-content #sidebar {position: static; width: 100%;}
#secondary-content #sidebar .sidebar-our-services {display: none;}
}

@media screen and (max-width: 899px) and (min-width: 361px) {
#secondary-content #sidebar .sidebar-promo {text-align: left; height: auto;}
#secondary-content #sidebar .sidebar-promo .promo-details span {display: inline;}
}

@media screen and (max-width: 500px) {
#secondary-content #main .images-container {display: inline; text-align: center;}
#secondary-content #main .images-container .image {float: none; margin-right: 0; margin-bottom: 20px;}
#secondary-content #main .images-container .image:last-child {margin-bottom: 0;}
}

/*********************************************************/
/**********************DOCTORS PAGE***********************/
/*********************************************************/
#secondary-content #main .doctor {overflow: hidden; margin-bottom: 19px;}
#secondary-content #main .doctor img {float: left; margin-top: 6px; margin-right: 16px;}
#secondary-content #main .doctor-bio {float: left; max-width: 490px;}
#secondary-content #main .doctor-bio h2 {margin-top: 0;}

@media screen and (max-width: 999px) {
#secondary-content #main .doctor-bio {max-width: 67%;}
}

@media screen and (max-width: 899px) {
#secondary-content #main .doctor-bio {max-width: 75%;}
}

@media screen and (max-width: 767px) {
#secondary-content #main .doctor-bio {width: 100%; float: none; max-width: none;}
}

@media screen and (max-width: 430px) {
#secondary-content #main .doctor img {float: none;}
#secondary-content #main .doctor-bio {overflow: hidden; margin-top: 11px;}
}

/*********************************************************/
/*****************LASER CATARACT SURGERY******************/
/*********************************************************/

img.catalys-system {float: right; margin-top: -39px;}
#secondary-content #main ol {margin-left: 17px; font-size: 14px;}
#secondary-content #main ol li {margin-bottom: 8px;}

@media screen and (max-width: 625px) {
img.catalys-system {float: none; margin: 0 auto; display: block;}
}

@media screen and (max-width: 360px) {
img.catalys-system {width: 100%;}
}


/*********************************************************/
/**********************PAY YOUR BILL**********************/
/*********************************************************/
form.pay-your-bill {margin-top: 9px; margin-bottom: 20px; display: inline-block;}
form.pay-your-bill label {font-weight: bold;}
form.pay-your-bill input[type=text] {margin-top: 5px; margin-bottom: 15px; width: 168px; padding: 5px; color: #474747; border: 1px solid black; display: block;}
form.pay-your-bill input[type=image] {margin-left: -16px;}


/*********************************************************/
/**********************OPTICAL SHOP***********************/
/*********************************************************/
p.designer-frame-list {float: left;}
img.designer-frame-logos {float: right;}
.prescription-lenses {display: inline-block;}
.prescription-lenses ul {list-style: none;}
.prescription-lenses ul li {margin-bottom: 16px;}
.prescription-lenses img {float: right; margin-top: 25px; margin-left: 10px;}

@media screen and (max-width: 999px) {
img.designer-frame-logos {width: 75%;}
}

@media screen and (max-width: 899px) {
img.designer-frame-logos {width: 60%; margin-right: 120px;}
}

@media screen and (max-width: 650px) {
img.designer-frame-logos {width: 60%; margin-right: 60px;}
}

@media screen and (max-width: 480px) {
img.designer-frame-logos {width: 70%; margin-right: 0;}
}

@media screen and (max-width: 450px) {
img.designer-frame-logos {float: none; width: 100%;}
}

@media screen and (max-width: 359px) {
.prescription-lenses img {display: none;}
}


/*********************************************************/
/******************EYE HEALTH PRODUCTS********************/
/*********************************************************/

.product {margin-bottom: 40px; overflow: hidden;}
.product:last-child {margin-bottom: 0;}
.product-image {float: left; width: 17%; margin-right: 6%; text-align: center;}
.product-info {float: left; width: 77%;}

@media screen and (max-width: 640px) {
.product-image img {max-width: 100%;}
}