@charset "UTF-8";
/* CSS Document */

#learningathome-intro { padding: 1em 0; background-color:#fff; clear: both; }
#learningathome-intro h1 { padding-top: .5em; }
.learningathome { background-image: linear-gradient(0deg, #f4f8fc, #cbddf0/*#eaeaea, #d0d0d0*/); padding: 2em 0; clear: both; }
.learningathome h2 { color: #008eb0; }
.lah-head-logos { width: 360px; padding: 5px 80px 2em 0; float: left; }
.lah-logo { width: 360px; height: auto; }
.lah-nav { list-style: none; padding: 0; margin: 0 auto; clear: left; width: auto; }
.lah-nav li { display: block; float: left; }
.lah-nav li a { color: #008eb0; display: block; padding: 9px 12px; background-color: #f0f0f0; margin: 0 10px 0 0; border-radius: 5px; text-decoration: none; }
.lah-nav li a:hover { background-color: #efc903; color: #000; }
.lah { margin: 0 .5% .5% 0; padding: 1%; width: 22%; float: left; clear: none; background-color: #fff; border: none; overflow: hidden; }
#learningathome-webinars-upcoming .lah { margin: 0 .5% .5% 0; padding: 1%; width: 30.5%; float: left; clear: none; background-color: #fff; border: none; overflow: hidden; }
.lah img { margin: 0 0 5px 0; padding: 0; width: 100%; height: auto; }
.lah-article h3 { font-size: 140%; margin: 0; padding: 0 0 .25em 0; line-height: 120%; }
.lah-article p { margin: 0; padding: 0; font-size: 80%; }
.lah-schedule h3 { font-size: 150%; margin: 0; padding: 0; line-height: 120%; }
.lah h3 a { text-decoration: none; }
.lah h3 a:hover { text-decoration: underline; color: #000; }
.lah-schedule h4 { font-size: 100%; margin: 0; padding: 0 0 .25em 0; line-height: 120%; font-family: 'Open Sans', sans-serif; }
.lah-schedule p { margin: 0; padding: .25em 0 0 0; font-size: 90%; }
.lah-schedule a { color: #333; }
.lah-schedule a.btn { text-decoration: none; display: block; padding: 8px 0; width: 80%; margin: 2px auto; border-radius: 5px; color: #fff; background-color: #008eb0; }
.lah-schedule a.btn:after { content: ' \00BB'}
.lah-schedule a.btn:hover { color: #000; background-color: #efc903; }
.lah-schedule { text-align: center; }
.lah-article { }
#learningathome-stem .lah-article { }
#learningathome-testimonials .lah-article { }
#learningathome-testimonials .lah-article p { margin-bottom: .75em; }
.lah-schedule-wrap { }
.aow { background-color: #f15928; }
.sci-u-aow { background-color: #00295d; }
.aow, .sci-u-aow { z-index: 100; position: absolute; color: #fff; padding: 5px 10px; text-align: left; display: block; width: auto; margin: 0 auto; font-size: 80%; font-style: italic; }
.sci-u { color: #4b76a7; text-transform: uppercase; font-weight: normal; }
.grade-level { font-weight: bold; font-style: italic; }
.archive-activity-link { font-size: 100%; clear: both; padding: 1em 0 0 0; }
#learningathome-footer { text-align: center; background-color: white !important; padding: 0 0 2em 0; }
#learningathome-subscribe h2 { text-align: center; }
.papbs { width: 440px; height: auto; padding: 0 60px 0 0; }
.pade { width: 340px; height: auto; padding: 0; }
.psea { width: 300px; height: auto; padding: 0 0 1em 0; }
.milk { float: none; clear: left; width: 400px; height: auto; padding: 0 0 1em 0; }
.stuckey { max-width: 300px; margin: 1em auto; }
.hufnagel { text-align: center; font-weight: bold; font-size: 150%; }
.lah-footer-logos { margin: 1em auto; width: 850px; }
.lah-footer { clear: both; font-size: 80%; padding: 2em 0 0 0; }
#learningathome-webinars .lah-article h3 { font-size: 120%; }
#learningathome-webinars .lah-article { }
#learningathome-webinars .lah-article p { margin-bottom: .75em; }
.registration { font-size: 40%; text-transform: uppercase; color: darkred; }
#learningathome-webinars-upcoming .lah-article h3 { font-size: 120%; }
#learningathome-webinars-upcoming .lah-article p { margin-bottom: .75em; font-size: 80%; }
#learningathome-games .lah-article p { font-size: 79%; }
.flag { display: inline; height :1em; with: auto; border: none !important; padding: 0; margin: 0; }
#learningathome-educators .lah-article { }
.spacevid { margin: 0 .5% .5% 0; padding: 1%; width: 30%; float: left; clear: none; background-color: #fff; border: none; overflow: hidden; min-height: 204px; font-size: 90%; }
.spacevid img { margin: 0 0 5px 0; padding: 0; width: 100%; height: auto; }
.spacevid a { text-decoration: none; }
.spacevid p { margin: 0; padding: 0; }
.lah-monthly .grade-level { display: none; }

#yln-header { width: 100%; height: 0; margin-bottom: .5em; padding-top: 25% !important; background-image: url("../images/yln-header-new.jpg"); background-repeat: no-repeat; background-size: cover; text-indent: -9999px; }
#yln-header2 { width: 100%; height: 0; margin-bottom: .5em; padding-top: 25% !important; background-image: url("../images/yln-header-educators.png"); background-repeat: no-repeat; background-size: cover; text-indent: -9999px; }
.yln-intro { padding: 1em 2em; }

.yln-subscribe-wrap { background: none !important; width: 600px; margin: 2em auto 0 auto; }
.yln-email-label { font-size: 18px; line-height: 32px; }
.yln-email-field { height: 17px; float: left; margin: 0 15px; width: 300px; }
.yln-submit-wrap { margin: -33px 0 0 0; }

/* Your Leaning Neighborhood Careers Side Scrolling */
.yln-section { padding: 1em 0 1em 1em; background-image: linear-gradient(0deg, #f4f8fc, #cbddf0); }
.yln-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 28%; padding: 0; overflow-x: auto; }
.yln-group { display: grid; grid-auto-flow: column; }
.yln-element {  padding: 15px; margin: 10px 0 10px 10px; background: white; border-radius: 5px; }
.yln-element img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 .25em 0; }
.snaps-inline { scroll-snap-type: inline mandatory; scroll-padding-inline: 5px; }
.snaps-inline > * { scroll-snap-align: start; }
.yln-element a { text-decoration: none; }
.yln-element a:hover {  text-decoration: underline; color: black;}

#yln-careers-header { background-image: linear-gradient(0deg, #f4f8fc, #cbddf0); padding: 1em 2em; }
.yln-careers-intro { float: left; width: 50%; }
.yln-careers-intro img { width: 30%; height: auto; padding: 0 0 2em 0; }
.yln-careers-main-img { width: 45%; padding-left: 5%; float: right; }
.yln-careers-main-img img { width: 100%; height: auto; }
.yln-link { margin: 0; padding: 0; font-size: 90%; }
.yln-element h3 { margin: 0 0 .25em 0 !important; padding: 0 !important; font-size: 120%; line-height: 125%; font-family: 'Open Sans', sans-serif; font-weight: 700; }

#gradebands-filter,
#cluster-filter, 
#buildingskills-filter,
#pastwebinars-filter { margin: 1em 0 !important; padding: 0 !important; font-size: 120%; }
#gradebands-filter li,
#cluster-filter li, 
#buildingskills-filter li,
#pastwebinars-filter li { margin: 0 !important; padding: 0 !important; list-style: none; display: inline-block; line-height: 300%; }
#gradebands-filter li a,
#cluster-filter li a, 
#buildingskills-filter li a,
#pastwebinars-filter li a { text-decoration: none; padding: .5em 1em; margin: 1em .2em; background: #fff; border-radius: 5px; }
#gradebands-filter li.active a,
#cluster-filter li.active a, 
#buildingskills-filter li.active a,
#pastwebinars-filter li.active a { background-color: lightgreen; }

.scroll-rev { display: block; color: orangered; border: none; position: absolute; left: 50px; font-size: 50px; background-color: white; cursor: pointer; margin-top: 100px; opacity: 50%; border-radius: 50%; }
.scroll-fwd { display: block; color: orangered; border: none; position: absolute; right: 20px; font-size: 50px; background-color: white; cursor: pointer; margin-top: 100px; opacity: 50%; border-radius: 50%; }
.scroll-rev:hover,
.scroll-fwd:hover { opacity: 80%; }

.learn-schedule td { width: 40%; padding: 0 5% 2em 5%; text-align: center; vertical-align: top; }
.learn-schedule img { width: 100%; height: auto; padding: 5px 0; }
.learn-schedule a { text-decoration: none; }
.learn-schedule .activities { font-size: 110%; }

.camp-schedule td { padding: 10px; background-color: #fff; }
.vcamp-sidenav { list-style: none; padding: 0; margin: 0 1em 0 .5em; font-size: 100%; }
.vcamp-sidenav li { padding: .5em 0; border-top: 1px solid #eee; float: none; }
.vcamp-sidenav a { text-decoration: none; }
.kids-schedule { width: 90%; }
.kids-schedule td { padding: 5px; vertical-align: top; }
.kids-schedule tr:nth-child(odd) { background-color: #fff; }


@media (max-width: 1200px) {
	
/*** LEARNING AT HOME ***/
#learningathome-intro { padding: 1em 0; background-color:#fff; clear: both; }
.learningathome { background-image: linear-gradient(0deg, #f4f8fc, #cbddf0/*#eaeaea, #d0d0d0*/); padding: 2em 0; clear: both; }
.learningathome h2 { color: #008eb0; }
.lah-logo { width: 360px; height: auto; padding: 5px 70px 40px 0; float: left; }
.lah-nav { list-style: none; padding: 0; margin: 0 auto; }
.lah-nav li { display: block; float: left; }
.lah-nav li a { color: #008eb0; display: block; padding: 7px 10px; background-color: #f0f0f0; margin: 0 8px 0 0; border-radius: 5px; text-decoration: none; font-size: 90%; }
.lah-nav li a:hover { background-color: #efc903; color: #000; }
.lah { margin: 0 .5% .5% 0; padding: 1%; width: 22.5%; float: left; clear: none; background-color: #fff; border: none; }
.lah img { margin: 0 0 5px 0; padding: 0; width: 100%; height: auto; }
.lah-article h3 { margin: 0; padding: 0 0 .25em 0; line-height: 120%; }
.lah-article p { margin: 0; padding: 0; font-size: 75%; }
.lah-schedule h3 { font-size: 130%; margin: 0; padding: 0; line-height: 120%; }
.lah h3 { font-size: 100% !important }
.lah h3 a { text-decoration: none; }
.lah h3 a:hover { text-decoration: underline; color: #000; }
.lah-schedule h4 { font-size: 80%; margin: 0; padding: 0 0 .25em 0; line-height: 120%; font-family: 'Open Sans', sans-serif; }
.lah-schedule p { margin: 0; padding: .25em 0 0 0; font-size: 80%; }
.lah-schedule a.btn { text-decoration: none; display: block; padding: 8px 0; width: 100%; margin: 2px auto; border-radius: 5px; color: #fff; background-color: #008eb0; }
.lah-schedule a.btn:after { content: ' \00BB'}
.lah-schedule a.btn:hover { color: #000; background-color: #efc903; }
.lah-schedule { text-align: center; }
.lah-article {  }
.lah-schedule-wrap { }
.aow, .sci-u-aow { font-size: 70%; }
	
}


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

#learningathome-intro { padding: 1em 0; background-color:#fff; clear: both; }
#learningathome-intro h1 { padding-top: .5em; font-size: 160%; }
#learningathome-intro p { font-size: 85% }
.learningathome { background-image: linear-gradient(0deg, #f4f8fc, #cbddf0/*#eaeaea, #d0d0d0*/); padding: 2em 0; clear: both; }
.learningathome h2 { color: #008eb0; }
.lah-logo { width: 270px; height: auto; padding: 5px 50px 50px 0; float: left; }
.lah-nav { list-style: none; padding: 0; margin: 0 auto; }
.lah-nav li { display: block; float: left; }
.lah-nav li a { color: #008eb0; display: block; padding: 7px 10px; background-color: #f0f0f0; margin: 0 4px 0 0; border-radius: 5px; text-decoration: none; font-size: 85%; }
.lah-nav li a:hover { background-color: #efc903; color: #000; }
.lah { margin: 0 1% 1% 0; padding: 1.5%; width: 46%; float: left; clear: none; background-color: #fff; border: none; }
.lah img { margin: 0 0 5px 0; padding: 0; width: 100%; height: auto; }
.lah-article h3 { font-size: 120%; margin: 0; padding: 0 0 .25em 0; line-height: 120%; }
.lah-article p { margin: 0; padding: 0; font-size: 80%; }
.lah-schedule h3 { font-size: 130%; margin: 0; padding: 0; line-height: 120%; }
.lah h3 { font-size: 120% !important }
.lah h3 a { text-decoration: none; }
.lah h3 a:hover { text-decoration: underline; color: #000; }
.lah-schedule h4 { font-size: 80%; margin: 0; padding: 0 0 .25em 0; line-height: 120%; font-family: 'Open Sans', sans-serif; }
.lah-schedule p { margin: 0; padding: .25em 0 0 0; font-size: 80%; }
.lah-schedule a.btn { text-decoration: none; display: block; padding: 8px 0; width: 100%; margin: 2px auto; border-radius: 5px; color: #fff; background-color: #008eb0; }
.lah-schedule a.btn:after { content: ' \00BB'}
.lah-schedule a.btn:hover { color: #000; background-color: #efc903; }
.lah-schedule { text-align: center; min-height: 0; }
#learningathome-webinars-upcoming .lah { margin: 0 1% 1% 0; padding: 1.5%; width: 46%; float: left; clear: none; background-color: #fff; border: none; overflow: hidden; }
	
.yln-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 43%;
  padding: 0;
  overflow-x: auto;
}
.scroll-controls { display: none; }
	
}

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

#learningathome-intro { padding: 0; background-color:#fff; clear: both; }
#learningathome-intro h1 { padding-top: .5em; font-size: 160%; }
#learningathome-intro p { font-size: 85% }
.learningathome { background-image: linear-gradient(0deg, #f4f8fc, #cbddf0/*#eaeaea, #d0d0d0*/); padding: 1em; clear: both; }
.learningathome h2 { color: #008eb0; }
.lah-logo { max-width: 320px; height: auto; padding: 0 0 1em 0; float: none; }
.lah-nav { list-style: none; padding: 0; margin: 0 auto; }
.lah-nav li { display: block; float: left; }
.lah-nav li a { color: #008eb0; display: block; padding: 7px 10px; background-color: #f0f0f0; margin: 0 4px 0 0; border-radius: 5px; text-decoration: none; font-size: 85%; }
.lah-nav li a:hover { background-color: #efc903; color: #000; }
.lah { margin: 0 0 10px 0; padding: 2%; width: 96%; float: none; clear: none; background-color: #fff; border: none; }
.lah img { margin: 0 0 5px 0; padding: 0; width: 100%; height: auto; }
.lah-article h3 { margin: 0; padding: 0 0 .25em 0; line-height: 120%; }
.lah-article p { margin: 0; padding: 0; font-size: 80%; }
.lah-schedule h3 { font-size: 130%; margin: 0; padding: 0; line-height: 120%; }
.lah h3 { font-size: 120% !important }
.lah h3 a { text-decoration: none; }
.lah h3 a:hover { text-decoration: underline; color: #000; }
.lah-schedule h4 { font-size: 80%; margin: 0; padding: 0 0 .25em 0; line-height: 120%; font-family: 'Open Sans', sans-serif; }
.lah-schedule p { margin: 0; padding: .25em 0 0 0; font-size: 80%; }
.lah-schedule a.btn { text-decoration: none; display: block; padding: 8px 0; width: 100%; margin: 2px auto; border-radius: 5px; color: #fff; background-color: #008eb0; }
.lah-schedule a.btn:after { content: ' \00BB'}
.lah-schedule a.btn:hover { color: #000; background-color: #efc903; }
.lah-schedule { text-align: center; }
.lah-schedule { text-align: center; min-height: 0; }
#learningathome-webinars-upcoming .lah { margin: 0 0 10px 0; padding: 2%; width: 96%; float: none; clear: none; background-color: #fff; border: none; overflow: hidden; }
	
#yln-header { width: 100%; height: 0; margin-bottom: .5em; padding-top: 33.33% !important; background-image: url("../images/yln-header-mobile.jpg"); background-repeat: no-repeat; background-size: cover; text-indent: -9999px; }
.yln-intro { padding: 1em; }	
.yln-subscribe-wrap { background: none !important; width: auto; max-width: 300px; margin: 2em auto 0 auto; }
.yln-email-label { font-size: 18px; line-height: 32px; }
.yln-email-field { height: auto !important; font-size: 18px; float: none; margin: 0 0 1em 0; width: 300px; text-align: left; padding: 5px; }
.yln-submit-wrap { margin: 0; }
	
.yln-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  padding: 0;
  overflow-x: auto;
}
.scroll-controls { display: none; }
.yln-careers-intro { float: none; width: auto; }
.yln-careers-intro img { width: 50%; height: auto; padding: 0 0 2em 0; }
.yln-careers-main-img { width: auto; padding: 1em 0; float: none; }

.lah-footer-logos { margin: 0 auto; width: auto; }
.lah-footer-logos img { max-width: 300px !important; padding: 0 0 1em 0; margin: 0 auto; }
	
}