@import url('https://fonts.googleapis.com/css?family=Oswald:300,400|Passion+One');

@media all {
  .strip {}
  .strip > div {}
  .strip > div > div {}
  .strip > div > div > div > :last-child {margin-bottom: 0;}
  .more {margin: 15px 0 0; font-family: "Oswald"; font-size: 1em; font-weight: 300; text-align: right; line-height: 1.2em;}
  .more a {display: inline-block; padding: 5px 15px 8px; border: 1px solid #1a99e0; border-radius: 5px; background: #1a99e0; color: #fff; transition: color .25s, background .25s; text-decoration: none;}
  .more a:link {color: #fff; text-decoration: none;}
  .more a:visited {color: #fff; text-decoration: none;}
  .more a:hover {color: #1a99e0; background: transparent; text-decoration: none;}
  .more a:active {color: #1a99e0; background: transparent; text-decoration: none;}
  .more a::after {content: '\276f'; padding-left: 10px;}


  @media all and (min-width: 480px) {
    .more {font-size: 1.2em; line-height: 1.2em;}
  }


  @media all and (min-width: 800px) {
    .more {font-size: 1.4em; line-height: 1.2em;}
     
  }

}

@media all { /* Header */
  .strip.strip-header {position: relative; width: 100%; height: calc(100vh - 320px); min-height: 400px; background: #000; overflow: hidden;}
  .strip.strip-header::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgba(0,0,0,.5); z-index: 200;}
  .strip.strip-header .image {position: absolute; width: 100%; height: 100%;}
  .strip.strip-header .image.image-001 {background: #000 url(../_images/_slideshow/oh-2023-header-1.jpg) center center; background-size: cover;}
  
  .strip.strip-header .image.image-002 {background: #000 url(../_images/_slideshow/oh-2023-header-2.jpg) center center; background-size: cover;}
  .strip.strip-header .image.image-003 {background: #000 url(../_images/_slideshow/oh-2023-header-3.jpg) center center; background-size: cover;}

  .strip.strip-header .image.image-004 {background: #000 url(../_images/_slideshow/001-oh-spring-2021.jpg) center center; background-size: cover;}

  .strip.strip-header .image.image-005 {background: #000 url(../_images/_slideshow/appstate-oh-spring-2023-update-slide-1.jpg) center center; background-size: cover;}

  .strip.strip-header .image.image-006 {background: #000 url(../_images/_slideshow/appstate-oh-spring-2023-update-slide.jpg) center center; background-size: cover;}

  .strip.strip-header .image.image-007 {background: #000 url(../_images/_slideshow/appstate-oh-spring-2023-update-slide-2.jpg) center center; background-size: cover;}

  .strip.strip-header .image.image-008 {background: #000 url(../_images/_slideshow/oh-fall-2026.jpg) center center; background-size: cover;}

  .strip.strip-header .text {position: absolute; left: 20%; top: 50%; width: 80%; color: #fff; transform: translate(-12.5%, -50%); text-align: center; z-index: 300;}
  .strip.strip-header .text p:first-child {font-family: "Passion One"; font-size: 2em; line-height: 1em;}
  .strip.strip-header .text h1 {font-family: "Passion One"; font-size: 2em; line-height: 1em;}
  .strip.strip-header .text p:nth-child(2)  {font-family: "Oswald"; font-size: 23px; line-height: 23px;}

  @media all and (min-width: 480px) {
    .strip.strip-header .text p:first-child {font-size: 3em; line-height: 1em;}
    .strip.strip-header .text h1 {font-size: 3em; line-height: 1em;}
  }

  @media all and (min-width: 600px) {
    .strip.strip-header .text p:first-child {font-size: 4em; line-height: 1em;}
    .strip.strip-header .text h1 {font-size: 4em; line-height: 1em;}
    .strip.strip-header .text p:nth-child(2) {font-size: 28px; line-height: 23px;}
  }

  @media all and (min-width: 768px) {
    .strip.strip-header {height: calc(100vh - 178px);}
  }

  @media all and (min-width: 800px) {
    .strip.strip-header .text h1 {font-size: 5.5em; line-height: 1em;}
    .strip.strip-header .text p:first-child {font-size: 5.5em; line-height: 1em;}
    .strip.strip-header .text p:nth-child(2) {font-size: 40px; line-height: 44px;}
  }
  @media all and (min-width: 1000px) {
    .strip.strip-header .text p:first-child {font-size: 6em; line-height: .8em; margin-bottom: 12px;}
    .strip.strip-header .text h1 {font-size: 7em; line-height: .8em; margin-bottom: 12px;}
  }    

}





@media all { /* visit */

  .strip.strip-visit > div {background: #04669d;}
  .strip.strip-visit > div > div > div {padding: 60px 15px;}
  .strip.strip-visit > div > div > div > p {max-width: 750px; margin: 0 auto 60px; font-family: "Oswald"; font-size: 1.6em; font-weight: 300; color: #000; text-align: left; line-height: 1.2em;}
  .strip.strip-visit ul.visit ul {margin:10px 0 6px 15px; font-size: 15px; line-height: 23px;}
  .strip.strip-visit ul.visit ul li ul {list-style-type: circle;}
  .strip.strip-visit ul.visit ol {margin:10px 0 10px 15px;}
  .strip.strip-visit ul.visit ul li {margin-bottom:6px;}
  .strip.strip-visit ul.visit ol li {margin-bottom:10px;}
  .strip.strip-visit ul.visit a {font-weight: 600;}
  .strip.strip-visit ul.visit ul li a {font-weight: 600;}
  ul.visit {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; list-style: none; margin: 0; padding: 0;}
  ul.visit > li {padding: 15px; border-radius: 10px; background: #fff;}
  ul.visit > li > div {display: table; width: 100%; table-layout: fixed;}
  ul.visit > li > div > div > div {vertical-align: top;}
  ul.visit > li > div > div > div a {display: block;}
  ul.visit > li > div > div > div img {display: block; line-height: 0;}
  ul.visit > li > div > div > h2 {font-family: "Oswald"; font-weight: 300; margin: 12px 0; color:#000; font-size: 31px;}
  ul.visit > li > div > div > h2 > a {color: #fff;}
  ul.visit > li > div > div > h2 > a:link {color: #fff; text-decoration: none;}
  ul.visit > li > div > div > h2 > a:visited {color: #fff; text-decoration: none;}
  ul.visit > li > div > div > h2 > a:hover {color: #eee; text-decoration: none;}
  ul.visit > li > div > div > h2 > a:active {color: #fff; text-decoration: none;}
  .strip-visit h1 {font-size: 35px; font-weight: bold; font-family: 'Oswald'; color: white; text-align: center;
    margin-bottom: 36px;}

  @media all and (min-width: 480px) {
    .strip.strip-visit > div > div > div > p {font-size: 1.6em; line-height: 1.2em;}
    ul.visit {grid-template-columns: repeat(2, 1fr);}
    ul.visit > li > div {display: block;}
   	ul.visit > li > div > div {display: table-row; width: 100%;}
    ul.visit > li > div > div > div {display: block; padding: 0 0 5px;}
  }

  @media all and (min-width: 600px) {
		ul.visit {grid-template-columns: repeat(2, 1fr);}
		ul.visit > li {padding: 30px;}
  }

  @media all and (min-width: 800px) {
		.strip.strip-visit > div > div > div {padding: 60px 30px;}
		ul.visit {grid-template-columns: repeat(3, 1fr);}
  }

  @media all and (min-width: 1000px) {
 
  }





@media all { /* Open House */
    .count-wrap {padding: 60px 24px;}
    #count {font-family: 'Passion One'; margin: 0px auto 36px; font-size: 45px;}
    .count-wrap p.small-note {font-size: 16px; max-width: 900px; margin: 0 auto; font-family: "Oswald"; font-weight: 300; color: #222; text-align: center; line-height: 1.2em;}
    .count-wrap p {font-size: 25px; font-family: "Oswald"; text-align: center; margin-bottom: 24px;}
    .strip.strip-statement {background: #ddd;}
    .act-wrap {margin-bottom: 60px;}
    .act-wrap p {font-size: 20px; font-weight: 200; font-family: 'Oswald'; color: white; text-align: center; margin-bottom: 24px; line-height: 27px;}
    .detail-oh-boxes {display: flex; flex-wrap: wrap; margin-bottom: 36px;}
    .detail-oh-boxes>* {flex: 1 1 auto; margin-bottom: 36px;}
    .detail-oh-boxes:last-child {color: darkgray; text-align: center;}
    .detail-oh-boxes:first-child {margin: 0 auto; text-align: center;}
    .detail-oh-boxes:first-child img {max-width: 50px;}
    .detail-oh-boxes h2 {font-size: 21px; font-weight: 800; margin-bottom: 12px; font-family: 'Open Sans'; transition: color 4s; color: white; text-align: center;}
    .overview {background: #111; padding: 48px 24px;}
    .overview h1 {font-size: 35px; font-weight: bold; font-family: 'Oswald'; color: white; text-align: center; margin-bottom: 36px;}
    .overview h2 {font-size: 35px; font-weight: bold; font-family: 'Oswald'; color: white; text-align: center; margin-bottom: 36px;}
    .small-ov-oh {font-size: 17px; font-weight: 200; font-family: 'Oswald'; color: white; text-align: center; margin-bottom: 24px;}
    .highlight {margin: 0px 12px 36px; text-align: center;}
    .highlight a {background-color: gold; color: #222; border-radius: 6px; font-weight: bold; letter-spacing: 1px; padding: 6px 24px 12px; font-size: 15px; font-family: 'Oswald';  border : 1px solid gold;  -webkit-transition : border 150ms ease-out;  -moz-transition : border 150ms ease-out; -o-transition : border 150ms ease-out;}
    .highlight a:hover {background-color: white; border: solid 1px #222; text-decoration: none;}
    .highlight a.larger {font-size: 20px;}
    .highlight a::after {content: '\276f'; padding-left: 10px;}
    a.fade-white:hover {border: solid 1px white; color: #333;}
    ul.no-attend {padding-left: 24px;}
    ul.no-attend li {margin-bottom: 6px;}
    .box-2 {align-self: center; flex: 1; text-align: center; padding: 36px 0px;}
    .box-2 h2 {font-size: 53px; font-family: 'Passion One'; margin-bottom: 0; line-height: 45px;}
    .box-2 h3 {font-family: 'Oswald'; font-size: 26px; margin-bottom: 24px;}
    .box-2 p {margin-bottom: 24px;}
    .attend {margin:0 auto; max-width: 1400px; display: flex; flex-direction: column;}
    .overview-int-wrap {max-width: 1100px; margin: 0 auto 36px;}
    .iso-facts {display: flex; flex-wrap:wrap; flex-direction: row; color: white; flex: 2; padding: 48px 0px;}
    .iso-facts>* {flex: 1 1 160px; font-size: 14px; line-height: 18px; font-family: 'Oswald'; width: 100%; padding: 24px 0px; text-align: center; margin: 0 auto;}
    .flex-facts {display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; width: 90%;}
    .fact-head {padding: 36px 0px 0px; align-self: center; text-align: center; flex: 1;}
    .overview-intro {max-width: 900px; margin: 0 auto;}
    .attend-wrap {flex: 1; padding: 48px 0px; background-color: #ddd;}
    .attend-interior {max-width: 300px; margin: 0 auto;}
    .attend-interior h1 {font-size: 35px; font-weight: bold; font-family: 'Oswald'; color: #222; text-align: center;}
    .attend-interior h2 {font-family: 'Oswald'; font-size: 26px; margin-bottom: 24px;}
    .flex-facts .iso-facts > div > img {max-width: 100px; display: block; margin: 0 auto 12px;}
    .facts {background-color: #014266;}
    .fact-head-int {font-size: 53px; font-family: 'Passion One'; color: white; line-height: 43px;}
    .fact-head-int-sub {font-size: 20px; font-family: 'Passion One'; color: white; text-transform: uppercase;}
    .gold {color: gold;}
    .strip.strip-stats > div > div > div > ul > li { padding: 10px; border: none; border-radius: 15px;}
    .strip.strip-stats > div > div > div > ul { grid-template-columns: repeat(2, 1fr); grid-gap: 30px;}
    .attend-interior > div > ul > li > ul {padding-left: 24px;}
    .text p:nth-child(2) {font-size: 18px; line-height: 23px;}
    .cta-wrap {display: flex; flex-direction: column; margin: 24px auto; justify-content: center; align-self: center;}
		.double-event-wrap {display: flex; max-width: 800px; margin: 36px auto 0px; flex-direction: column;}
    
  @media all and (min-width: 400px) {
    
  }

  @media all and (min-width: 480px) {

  }

  @media all and (min-width: 600px) {
      .detail-oh-boxes>* {flex: 1 1 385px; padding: 0px 48px;}
      .act-wrap p {font-size: 26px; font-weight: 200; font-family: 'Oswald'; color: white; text-align: center; margin-bottom: 24px; line-height: 31px;}
      .attend {margin:0 auto; max-width: 1400px; display: flex; flex-direction: row;}
      .highlight a.larger {font-size: 27px;}
  }

  @media all and (min-width: 800px) {
      .text p:nth-child(2) {font-size: 26px; line-height: 34px;}
      .highlight a {font-size: 20px;}
      .count-wrap {padding: 72px 24px;}
      .count-wrap p.small-note {font-size: 20px;}
      .count-wrap p {font-size: 35px; font-family: "Oswald"; text-align: center; margin-bottom: 40px;}
      #count {font-family: 'Passion One'; margin: 0px auto 24px; font-size: 70px;}
      .iso-facts>* {flex: 1 1 215px; font-size: 14px; line-height: 18px; font-family: 'Oswald'; width: 100%; padding: 24px 0px; text-align: center; margin: 0 auto;}
      .flex-facts {display: flex; flex-direction: row; max-width: 1200px; margin: 0 auto; width: 90%;}
      .fact-head {padding: 0px 0px 0px; align-self: center; text-align: center; flex: 1;}
      .strip.strip-stats > div > div > div > ul { grid-template-columns: repeat(3, 1fr); }
      .cta-wrap {display: flex; flex-direction: row; margin: 48px auto; justify-content: center; align-self: center;}
			.double-event-wrap {display: flex; max-width: 800px; margin: 36px auto 0px; flex-direction: row;}
      
}