/* meyer RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: 100%; font: inherit; vertical-align: baseline; }

/* TEMP DEV STYLES */
#admin { position: fixed; bottom: 0; width: 98%; padding: 1%; background: rgba(0,0,0,0.5); font-size: 13px; color: #FFF; text-align: center; clear: both; }
.typo-heading { font-size: 1.2em; color: #CCC; padding: 0.5em 0; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; margin: 0; }
.typo-description { font-size: 0.8em; color: #757575; padding: 1em 0.5em; background: #FCFCFC; margin: 0; }
.typo-section { padding: 1.5em 0; }
.temp { text-align: center; padding: 0.5em 1em; background: #FAFAFA; }
.temp a { font-size: 0.8em; border: 0; }

/* default typography */
body { position: relative; font-family: "open-sans", Helvetica, Arial, sans-serif; font-weight: 400; color: #555; background-color: #FAFAFA; margin: 0; overflow-x: hidden; }

/* block elements */
h1,h2,h3,h4,h5,h6 { font-family: "nobel", Helvetica, Arial, sans-serif; font-weight: 300; color: #028589; }
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; color: #555; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 14px; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em 0; }
caption { font-style: italic; margin: 0 0 1em 0; }
th { font-weight: bold; text-align: left; padding: 0.5em 0; border-bottom: 1px dotted #CCC; }
td { vertical-align: top; padding: 1em 0; border-bottom: 1px dotted #CCC; }
p { line-height: 1.5; margin: 0 0 1.5em 0; }
ul { list-style: disc; line-height: 1.5; padding: 0; margin: 0 0 1.5em 1.5em; }
ol { list-style: decimal; line-height: 1.5; padding: 0; margin: 0 0 1.5em 1.5em; }
dl { line-height: 1.5; margin: 0 0 1.5em 0; }
dt { font-weight: bold; margin: 0 0 0.5em 0; }
dd { margin-left: 1em; }
blockquote { font-family: Georgia, Serif; font-size: 1.2em; font-style: italic; color: #757575; padding: 0 2em; border-left: 2px solid #CCC; margin: 0 2em 1.5em 2em; }
figure { text-align: center; margin: 0 0 1.5em 0; }
figcaption { font-size: 0.8em; font-style: italic; color: #666; padding: 0.5em 0; }
hr { display: block; width: 100%; background: 0; border: 0; border-bottom: 1px solid #B22222; margin: 1em 0 2em; clear: both; }

/* inline elements */
img { max-width: 100%; height: auto; }
a { color: #009BB0; text-decoration: none; transition: 0.25s; }
a:hover, a:focus { color: #57C4E8; }
small { font-size: 0.85rem; }
em,i { font-style: italic; }
b,strong { font-weight: bold; }
sup { vertical-align: super; font-size: small; }

/* forms */
form { max-width: 100%; }
form p { margin: 0 0 1.5em 0; }
form ul { list-style: none; margin: 0 0 1.5em 0; }
form li { margin: 0 0 0.25em 0; }
fieldset { margin: 0 0 1.5em 0; }
legend { font-size: 1.6em; font-style: italic; font-weight: 400; color: #222; margin: 0 0 0.75em 0;}
label { display: block; }
input, textarea, select { font-size: 16px; padding: 0; border: 0; box-sizing: border-box; }
input[type='text'],input[type='tel'],input[type='email'],input[type='password'] { width: 100%; height: 48px; text-indent: 9px; border: 1px solid #AAA; }
select { width: 100%; height: 48px; border: 1px solid #AAA; }
textarea { width: 100%; height: 160px; padding: 9px; border: 1px solid #AAA; }
button, input[type='submit'] { width: 100%; height: 48px; font-size: 1rem; color: #FFF; text-transform: uppercase; background: #0099A5; border: 0; }

/* TEXT COLORS */
.txt-green { color: #70C1A4!important; }
.txt-blue { color: #57C4E8!important; }
.txt-blue-green { color: #009BB0!important; }
.txt-white { color: #fff!important; }
.txt-dark-gray { color: #707070!important; }

.bg-green { background-color: #70C1A4!important; }
.bg-blue { background-color: #2DA5CF!important; }
.bg-blue-green { background-color: #009BB0!important; }
.bg-dark-blue-green { background-color: #064C66!important; }
.bg-dark-gray { background-color: #4A4C4F!important; }
.bg-light-gray { background-color: #F9FAFA!important; }

/* GLOBAL LAYOUT */
.global-wrapper { position: relative; /*max-width: 1440px;*/ margin: 0 auto; }
.row-nav { position: fixed; top: 0; left: 0; right: 0; /*max-width: 1440px;*/ margin: 0 auto; z-index: 999; }
.row-footer { background: #F7F7F7; }
.nav { position: relative; height: 40px; padding: 25px 3rem 20px; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.content { position: relative; margin-top: 80px; } /* offset sticky navigation */
.background-video { position: absolute; top: 0; right: 0; bottom: 0; left: -0; width: 100%; z-index: -1; }
.background-video video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;object-fit: cover; }
.background-video-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background-color: rgba(255,255,255,0.9); z-index: -1; }
.footer { padding: 2rem 3rem; }

.aao-back { font-size: 14px; position: absolute; top: 10px; right: 48px; text-transform: uppercase; }

/* LOGO */
.logo { float: left; line-height: 40px; }
.logo a { border: 0; }
.logo img { width: 252px; height: 20px; margin: 10px 0; }

/* PRIMARY NAVIGATION */
.menu-toggle { position: absolute; top: 1.5rem; right: 2rem; width: 30px; height: 30px; padding: 5px 5px 5px 5px; background: #02ADA5; z-index: 999; }
.menu-toggle .bars { display: block; width: 20px; height: 4px; background: #FFF; margin: 0 0 4px 0; }

.menu { position: absolute; top: 1rem; right: -999rem; font-family: "nobel", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; list-style: none; line-height: 40px; margin: 0; }
.menu li { display: block; margin: 0; }
.menu li a { display: block; color: #546468; text-decoration: none; text-transform: uppercase; transition: 0.5s; ; }
.menu li a:hover { color: #028589; text-decoration: none; }
.menu li a.active { color: #028589; }

.menu-show { top: 80px; right: 2rem; width: 240px; padding: 1rem; background: #F7F7F7; }

/* home page */
.home-header { position: relative; /*padding: 4rem 4rem; */background: #E1E1E1; }
.home-event-heading { max-width: 768px; font-size: 42px; /*color: #028589;*/ margin: 0 0 1rem 0; }
.home-event-date { font-size: 22px; /*color: #546468;*/ margin: 0 0 1rem 0; }
.home-event-session { text-align: left; /*color: #028589;*/ text-transform: uppercase; margin-top: 60px; }
.home-event-session-marker { color: #028589; padding: 5px; background: #FFF; white-space: nowrap; }
.home-event-session-number { /*color: #028589*/ font-size: 16px;  margin-bottom: 20px; }
.home-header .slide { background-repeat: no-repeat; background-position: bottom right; }


/* controls for slick slider */
button.slick-prev, button.slick-next { position: absolute; top: 40%; width: 50px; font-size: 6rem; color: #FFF; background: transparent;  }
.slick-prev { /*left: -4rem;*/ }
.slick-next { /*right: -4rem;*/ }

.slick-initialized .slick-slide { padding: 6em 8em; min-height: 500px; }
button.slick-prev, button.slick-next { height: 110px; z-index: 1; }
button.slick-prev:focus, button.slick-next:focus { border: 1px solid gray; }

.home-categories { display: grid; grid-template-columns: 1fr; }
.home-categories .grid-item { position: relative; }
.home-categories .grid-item.cataract { background: #57C4E8; }
.home-categories .grid-item.refractive { background: #009BB0; }
.home-categories .grid-item.retina { background: #70C1A4; }
.home-categories a { display: block; padding: 4rem; font-size: 28px; font-weight: 700; color: #FFF; text-align: center; text-transform: uppercase; }
.home-categories img { width: 120px; margin: 0 0 0.5rem 0; }

.cataract-overlay { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; background-color: rgba(87,196,232,0.7); trabnsition: 0.5s; }
.cataract-overlay-text { position: relative; top: 40%; font-size: 0.925rem; font-weight: 400; color: #FFF; }
.home-categories a:hover .cataract-overlay { display: block; }

.refractive-overlay { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; background-color: rgba(0,155,176,0.7); trabnsition: 0.5s; }
.refractive-overlay-text { position: relative; top: 40%; font-size: 0.925; font-weight: 400; color: #FFF; }
.home-categories a:hover .refractive-overlay { display: block; }

.retina-overlay { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; background-color: rgba(112,193,164,0.7); trabnsition: 0.5s; }
.retina-overlay-text { position: relative; top: 40%; font-size: 0.925rem; font-weight: 400; color: #FFF; }
.home-categories a:hover .retina-overlay { display: block; }

/* category page */
.category-header { padding: 4rem 4rem 2rem 4rem; }
.category-header-image { text-align: center; margin: 0 0 1rem 0; }
.category-header-text { text-align: center; }
.category-header-text h1 { font-size: 36px; font-weight: 700; text-transform: uppercase; }
.category-section {  }
.category-section-pad { padding: 4rem; }
.category-aside { background: #F2F2F2; min-width: 450px; }

/* product page */
.product-header { position: relative; }
.product-header-image { width: 100%; height: 100%; }
.product-header-image img { display: block; width: 100%; }
.product-header-text { position: absolute; top: 0; left: -999em; padding: 4rem; z-index: 666; }
.product-section { background: #FFF; }
.product-section-alt { background: #F7F7F7; }
.product-section-pad { padding: 4rem; }
.product-section-banners { padding: 4rem; }
.product-section-banners img { margin-bottom: 30px; }
.product-videos { padding: 4rem; }
.product-resources { padding: 4rem; }
.product-aside { background: #F2F2F2; min-width: 450px; }
.product-aside-padding { padding: 1rem 1rem 0 1rem; }

/* media page */
.media-header { padding: 4rem; background: #FFF; }
.media-header-text { text-align: center; }
.media-header-text h1 { font-size: 60px; font-weight: 500; text-transform: uppercase; }
.media-header-text p { max-width: 768px; margin: 2rem auto 1rem auto; }
.media-section { background: #FFF; }
.media-section-pad { padding: 4rem; }
.media-videos { display: grid; grid-row-gap: 1rem; grid-column-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* programs page */
.programs-item { position: relative; padding: 100px 5%; background-repeat: no-repeat; background-position: bottom right; }
.programs-item img { display: block; }
.programs-item-text {/*position: absolute; top: 4rem; right: 4rem; left: 4rem;*/ }
.programs-item-heading { max-width: 960px; font-size: 60px; }
.programs-item-date { max-width: 960px; font-size: 38px; margin-top: 2rem; }
.programs-item-session { text-align: left; text-transform: uppercase; margin-top: 2rem;}
.programs-item-session-marker { color: #028589; padding: 5px; background: #FFF; white-space: nowrap; }
.programs-session-number { color: #fff; font-size: 16px;  margin-bottom: 20px; }


/* info page */
.page-header { background: #E1E1E1; padding: 2rem 4rem; }
.page-header h1 { text-transform: uppercase;}
.page-section { background: #FFF; padding: 2rem 4rem; }

/* footnotes */
.footnotes { background-color: white; padding: 4rem; font-size: 12px; }
.footnotes h4 { margin-bottom: 10px; }

/* content used across several page types */
.grid-products { display: grid; grid-row-gap: 1rem; grid-column-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(80px, 128px)); justify-content: space-evenly; }
.Xgrid-products img { width: 128px; height: 128px; }
.grid-section { min-height: 400px; /*padding: 4rem;*/ }
.grid-videos { display: grid; grid-column-gap: 1rem; grid-row-gap: 1em; grid-template-columns: 1fr; }
.grid-resources { display: grid; grid-column-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
.grid-resources img { height: 300px; }

.flexgrid-resources { display: flex; }
.flexgrid-resources img { width: auto; height: auto; max-width: 100%; }
.flexgrid-resources .grid-item { margin-right: 20px; }

.grid-item.grid-content { padding: 4rem; }

.product-programs {}
.product-programs .program { padding: 0.75rem 0.75rem 0 0.75rem; background: #F2F2F2; }


.event { position: relative; width: 100%; background: #005572; }
.event-link:hover { text-decoration: none; }
.event-message { padding: 2rem; z-index: 666; }
.event-heading { font-size: 32px; color: #70C1A4; margin: 0 0 1rem 0; }
.event-date { color: #FFF; }
.event-session { color: #70C1A4; text-transform: uppercase; font-size: 12px; }
.event-session-number { color: #fff; font-size: 16px;  margin-bottom: 20px;}
.event-session-marker { color: #028589; padding: 5px; background: #FFF; white-space: nowrap; font-size: 13px; margin-right: 10px; }

.program { position: relative; padding: 1rem 1rem 0 1rem; }
.program-link:hover { text-decoration: none; }
.program img { display: block; width: 100%; }
.program-message { position: absolute; top: 1rem; left: 1rem; right: 1rem; padding: 1rem; background: #FFF; margin: 1rem; z-index: 666; }

.download {}
.download-link:hover { text-decoration: none; }
.download a { display: block; color: #000; text-decoration: none; }
.download img { margin: 0 0 0.5rem 0; }
.download-text { padding-left: 36px; background: url(./assets/images/icon-download.png) no-repeat top left; background-size: 24px 24px; }
.download-name { font-family: "nobel", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 18px; color: #000; margin: 0; }
.download-message { font-size: 12px; color: #737373; text-transform: uppercase; margin-top: 0.25rem; }


/* MARGINS */
.mb-small { margin: 0 0 10px 0; }
.mb-med { margin: 0 0 20px 0; }
.mb-large { margin: 0 0 30px 0; }


/* PAGE */
.products-link { display: block; color: #546468; text-decoration: none; text-transform: uppercase; border-radius: 128px; }
.products-link:hover { color: #546468; text-decoration: none; transform: scale(1.05,1.05); }
.products-link img { border: 5px solid #FFF; border-radius: 128px; transition: 0.25s; }
.products-link-name { display: block; font-size: 12px; }
.products-link-detail { display: block; font-size: 12px; opacity: 0; transition: 0.25s; }
.products-link:hover img { border: 5px solid #57C4E8; }
.products-link:hover .products-link-detail { opacity: 1; }

.products-link:hover  .products-link-name { color: #009BB0; }
.products-link:hover  .products-link-detail { color: #009BB0; }

.products-link.active { transform: scale(1.05,1.05); }
.products-link.active img { border: 5px solid #57C4E8; }
.products-link.active .products-link-name { color: #009BB0; }
.products-link.active .products-link-detail { color: #009BB0; }

.section-text ul { color: #028589; }

/* BUTTONS */
.link { display: block; color: #FFF; text-align: center; text-transform: uppercase; padding: 20px 0.75rem; background: #0099A5; border: 2px solid #0099a5; }
.link:hover { background: none; border: 2px solid #0099a5; color: #0099a5; }

/* GLOBAL FOOTER */
.footer-links { list-style: none; font-size: 14px; line-height: 17px; text-transform: uppercase; margin: 0 0 1rem 0; }
.footer-links li { display: inline-block; margin: 0 0.5rem 0 0; }
.footer-links a { color: #707070; }
.footer-legal { font-size: 0.7rem; margin: 0 0 1rem 0; }
.footer-social-links { list-style: none; margin: 0 0 1rem 0; }
.footer-social-links li { display: inline-block; }


/* MISC */
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 0; }
.video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.map iframe { width: 100%; margin: 0 0 1.5em 0; }
.sr-only { position: absolute; left: -999em; }
.text-center { text-align: center; }
.img-border { border: 1px solid #707070; }


/* MESSAGES ERRORS ETC */
.alert { font-size: 0.9em; font-weight: bold; padding: 1em; }
.alert-normal { color: inherit; border: 1px solid #CCC; }
.alert-warning { color: #FF6600; border: 2px solid #FF9900; }
.alert-error { color: #FF0000; background: #FFFF33; border:1px solid #FF0000; }


/* POPUP MODAL */
.smartmodal { width: 100%; max-width: 960px; }
.smartmodal-modal { margin: 0!important; padding: 0!important; }
.smartmodal .form-popup { padding: 40px; }
.smartmodal-heading { color: #FFF; text-align: center;  }
.smartmodal-message { color: #FFF; text-align: center; }
.smartmodal form { max-width: 320px; margin: 0 auto; }
.smartmodal-label { position: absolute; left: -999em; color: #FFF; }
.smartmodal-list { list-style: none; margin: 0 0 1.5rem 0; }
.smartmodal-list li { display: inline-block; width: 45%; white-space: no-wrap; }
.smartmodal-button { color: #FFF; }
.smartmodal-logo { width: 100%; height: auto; max-width: 600px; margin: 0 auto 30px; display: block; }
.smartmodal-close { padding: 5px 10px; color: white; font-weight: bold; position: absolute; right: 20px; top: 20px; font-size: 30px; bordeR: 1px solid white; }

/* MEDIA QUERIES */

/* small screen */
@media screen and (min-width: 600px) {
.home-categories { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-videos { display: grid; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; }
}

/* tablet */
@media screen and (min-width: 768px) {

.home-header { position: relative; /*padding: 6rem 8rem;*/ background: #E1E1E1;}
.home-event-heading { max-width: 768px; font-size: 60px; /*color: #028589;*/ margin: 0 0 1rem 0; }
.home-event-date { font-size: 36px; /*color: #546468;*/ margin: 0 0 1rem 0; }
.slick-prev { left: 20px; }
.slick-next { right: 20px; }

.grid-section { display: grid; grid-column-gap: 1rem; grid-template-columns: 1fr 1fr; /*padding-bottom: 8rem;*/ }

}

/* larger than tablet */
@media screen and (min-width: 1024px) {

.menu-toggle { display: none; }
.menu { position: relative; top: 6px; right: 0; text-align: right; margin: 0 0 0 300px; }
.menu li { display: inline-block; margin: 0 0 0 1rem; }
.menu li a { display: block; color: #546468; text-decoration: none; text-transform: uppercase; transition: 0.5s; ; }
.menu li a:hover { color: #028589; text-decoration: none; }

.grid { display: grid; grid-row-gap: 1rem; grid-column-gap: 0rem; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.grid2 { display: grid; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; }
.grid3 { display: grid; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr 1fr; }
.grid-videos { display: grid; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; }
.grid-footer { display: grid; grid-template-columns: 1fr 1fr; }
.category { display: grid; grid-template-columns: 3fr 1fr; }
.product { display: grid; grid-template-columns: 3fr 1fr; }
.footer-links { text-align: right; }
.footer-links li { margin: 0 0 0 0.5rem; }
.footer-legal { text-align: right; }
.footer-social-links { text-align: right; }

}

@media screen and (max-width: 1200px) {
	.programs-item { background-size: 60%; }
}


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

	.slick-initialized .slick-slide {
		padding: 2em 2em;
		min-height: 650px;
		background-size: 90%;
	}

	.home-event-heading {
		font-size: 40px;
	}

	button.slick-prev {
		    top: revert;
			bottom: 20px;
			left: 20px;
	}
	button.slick-next {
		    top: revert;
			bottom: 20px;
			left: 130px;
	}

}


@media screen and (max-width: 650px) {
	.programs-item-session { margin-bottom: 300px; }
	.programs-item { background-size: 100%; }

}