/*
   
   Theme Name: Mt. Airy Learning Tree 2020
   Text Domain: malt2020
   Author: Zero Defect Design LLC
   Author URI: https://zerodefectdesign.com
      
   */
   
	@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
	
   /* resets */
   
   *, *::before, *::after { box-sizing: border-box; }
   html { height: 100%; -webkit-text-size-adjust: 100%; }
   body { margin: 0; padding: 0; min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; }   
   table { border: 0; padding: 0; border-spacing: 0px; border-collapse: collapse; }
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
   img { vertical-align: bottom; max-width: 100%; display: block; }
   input, button, textarea, select { font: inherit; }
   input:focus, select:focus, textarea:focus, button:focus { outline: none; }

   /* type */
   
   body { font: 400 normal 18px/1.4 'Lato', sans-serif; }
   b, strong { font-weight: 700; }
   h2 { font-size: 36px; font-weight: 700; line-height: 1.1; margin: 0 0 0.5em 0; }
   h3 { font-size: 28px; font-weight: 700; line-height: 1.1; margin: 0 0 0.5em 0; color: #eb6732; }
   h5 { font-size: 16px; text-transform: uppercase; padding: 10px 0px 0px 0px; margin: 0 0 0.5em 0; border-top: 2px dotted #7a726f; }
   .light, h3 .light { font-weight: 400; color: #AAAAAA; }
   p { margin: 0 0 0.5em 0; }
   section { margin: 0 0 2em 0; }
   section.divided { padding: 1em 0 1em 0; border-top: 2px dotted #7a726f; border-bottom: 2px dotted #7a726f; }
   .wp-caption-text { margin-top: 0.5em; font-weight: 300; color: #AAAAAA; font-size: 90%; line-height: 1.2; }
   
   /* links + controls */
   
   a { color: #476a93; text-decoration: none; }
   a:hover { color: #EB6732; }
   a.btn, .btn { color: #FFFFFF; background-color: #82ACE3; border: 0; padding: 0.25em 1em; cursor: pointer; font-weight: 700; white-space: nowrap; }
   a.btn:hover, .btn:hover { color: #FFFFFF; background-color: #EB6732; }
   #footer a { color: #82ACE3; }
   #footer a:hover { color: #e79a43; }
   .content a { font-weight: 700; }
   .content li { margin-bottom: 0.25em; }
   .shadebox { display: inline-block; padding: 1.5em; background-color: rgba(122,114,111,0.15); border-radius: 0 20px 0 20px; }
   .shade { background-color: rgba(230,222,215,0.6); }
   
   /* structure */
   
   body { background-color: #FFFFFF; color: #000000; }
   .container { min-height: 100vh; display: flex; flex-direction: column; align-items: space-between; padding-top: 110px; }
   .content { flex-grow: 1; padding: 25px 0px; }
   .frame, figure.wp-block-gallery { padding: 25px 120px; }
   figure.wp-block-gallery { padding-top: 0px; padding-bottom: 0px; }
   .frame.insta { background-color: #996398; }
   .welcome { display: flex; align-items: center; padding: 20px 0px; }
   .welcome .message { margin-right: 30px; }
   .malt-circle 
   { 
      width: 200px; height: 200px; background: rgba(230,222,215,0.6) url('images/malt-w.svg') 62% 50% no-repeat; background-size: 65% 65%; border-radius: 50%; 
      flex-grow: 0; flex-shrink: 0;
   }
   .quicklinks { background-color: #e79a43; }
   .quicklinks a { white-space: nowrap; color: #FFFFFF; font-weight: 700; }
      
   #hd { display: flex; height: 130px; position: fixed; top: 0px; left: 0px; right: 0px; background-color: #FFFFFF; padding-top: 10px; z-index: 200; border-bottom: 10px solid #FFFFFF; }
   #hd a.leaf { width: 110px; flex-shrink: 0; margin-right: 10px; background: #037840 url('images/leaf-shadow.svg') center center no-repeat; background-size: auto 85%; }
   #hd a.malt { width: 300px; flex-shrink: 0; margin-right: 10px; background: #a1cbb6 url('images/malt.svg') center 55% no-repeat; background-size: 240px auto; }
   #hd .menubox 
   { 
      flex-basis: 95%; flex-shrink: 1; flex-grow: 1; background-color: rgba(230,222,215,0.6); text-align: right; padding: 14px 20px 14px 10px; display: flex; 
      flex-direction: column; justify-content: space-between; color: rgba(122,114,111,0.7);
   }
   #hd .menubox a { line-height: 1;}
   #menu, #topbar { list-style-type: none; margin: 0; padding: 0; }
   #menu li, #topbar li { display: inline-block; }
   #menu li a { display: inline-block; padding: 6px 9px; font-weight: 700; }
   ul#menu ul { display: none; }
   
   #menu li.has-submenu:hover {  } 
   #menu li ul { display: none; position: absolute; z-index: 220; margin: 0px; padding: 0px; list-style-type: none; }
   #menu li:hover ul { display: block; text-align: left; background: transparent url('images/triangle.svg') 10px 0px no-repeat; background-size: auto 20px; padding-top: 11px; }
   #menu li ul li { margin: 0px; padding: 0px; list-style-type: none; text-transform: none; display: block; float: none; }
   #menu li ul li a { color: #FFFFFF; display: block; font-size: 16px; padding: 4px 9px; background-color: #476A93; background-image: none; }
   #menu li ul li:first-child { border-top: 6px solid #476A93; }
   #menu li ul li:last-child { border-bottom: 6px solid #476A93; }
   #menu li ul li a:hover { color: #FFFFFF; background-color: #e79a43; opacity: 1; }
   
   #topbar li a, #topbar li span { display: inline-block; font-weight: 400; font-size: 90%; padding: 6px 4px; }
   #topbar li a.facebook, #topbar li a.instagram { padding: 6px 9px; }
   #topbar svg, #menu svg { width: auto; height: 1.1em; display: inline-block; position: relative; top: 4px; }
   #topbar a.facebook svg { height: 1em; top: 3px; }

   #footer { flex-grow: 0; flex-shrink: 0; color: rgba(255,255,255,0.7); background-color: #2f263f; font-size: 90%; padding: 20px 0px; }
   #footer .frame.cols { display: flex; justify-content: flex-start; padding-bottom: 0px; }
   #footer .frame.cols div { flex-basis: 25%; flex-grow: 1; flex-shrink: 1; padding-right: 60px; margin-bottom: 25px; }
   #footer b { color: #FFFFFF; }

   #footer .social a { display: inline-block; margin: 0px 15px 0px 0px; }
   #footer .social a:last-child { margin-right: 0px; }
   #footer .social a svg { height: 24px; width: auto; }
   
   #footer .frame.credit { display: block; padding-top: 0px; }
   
   #signup { background-color: rgba(128,141,162,0.5); color: #000000; margin: 10px 0px; }
   #signup form { display: flex; margin-top: 10px; }
   #signup form input[type=text] { padding: 0.25em; border: 0; color: #000000; background-color: rgba(255,255,255,0.7); margin-right: 5px; flex-grow: 1; flex-shrink: 1; }
   #signup form input[type=submit].btn { background-color: #4b6787; }
   #signup form input[type=submit].btn:hover { background-color: #e79a43; }
   
   .columns { display: flex; align-items: flex-start; margin: 0px -20px; }
   .columns .column { flex-basis: 50%; flex-grow: 1; flex-shrink: 1; margin: 20px; }
   
   .alignright { width: 20%; min-width: 300px; height: auto; margin: 0 0 30px 60px; float: right; }
   .alignright img { width: 100%; height: auto; }
   img.right { width: 20%; min-width: 300px; height: auto; margin: 0 0 30px 60px; float: right; border-radius: 0 20px 0 20px; }
   h3 img { height: 30px; width: auto; display: inline-block; position: relative; margin-right: 3px; }
   
   .tilecats { display: flex; flex-wrap: wrap; justify-content: start; margin: 0px -5px; gap: 16px; }
   .tilecats a 
	{ 
		flex-basis: calc(25% - 12px); flex-shrink: 1; flex-grow: 0; position: relative; line-height: 1; border-radius: 0px 20px 0px 20px; 
		background-position: center center; background-repeat: no-repeat; background-size: cover;
	}
	.tilecats a::before { display: block; content: ""; width: 0; height: 0; padding-top: 50%; }
   .tilecats a img { width: 100%; height: auto; }
   .tilecats a span { position: absolute; bottom: 0px; left: 0px; margin-right: 16px; color: #FFFFFF; font-weight: 700; padding: 5px 10px 6px 10px; background-color: #82ACE3; border-radius: 0px 0px 0px 20px; }
   .tilecats a:hover span { background-color: #EB6732; }
   .tilecats a:hover img { opacity: 0.8; }
   
   .logogrid { display: flex; flex-wrap: wrap; justify-content: start; margin: -20px; }
   .logogrid a, .logogrid span { margin: 20px; background-position: center center; background-repeat: no-repeat; background-size: contain; width: 150px; height: 100px; }
   .logogrid a.featured, .logogrid span.featured { width: 300px; }
   
   .instagrid { display: flex; justify-content: start; margin: 0px -5px; }
   .instagrid a { padding: 5px; width: 20%; }
   .instagrid a img { width: 100%; height: auto; }
   
   .upcoming { display: flex; justify-content: start; margin: 10px -10px 0px -10px; }
   .upcoming .cell { padding: 10px; flex-grow: 1; }
   
   .cell ul { list-style-type: none; margin: 0; padding: 0; }
   .cell ul li { padding: 5px 0px; }
   
   .slider, .slide { position: relative; color: #FFFFFF; }
   .slide, .slide .img { width: 100%; height: 50vw; max-height: 800px; background-position: center top; background-size: cover; background-repeat: no-repeat; display: block; }
   .slide .caption 
   { 
      position: absolute; bottom: 0px; left: 0px; right: 0px; padding-top: 40px; padding-bottom: 40px; 
      background-color: rgba(47,38,63,0.7); font-weight: 400;
   }
   a.slide:hover { color: #FFFFFF; }
   a.slide h3 { color: #ffb35e; }
   .slidecontrol { padding: 5px 0px 10px 0px; text-align: center; position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 50; }
   .slidecontrol a.pager { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin: 0px 3px; background-color: #82ACE3; opacity: 0.4; }
   .slidecontrol a.pager.active { opacity: 1; }
   .slidecontrol a.pager:hover, .slidecontrol a.pager.active:hover { opacity: 1; background-color: #e79a43; }
   
   .items { columns: 2; column-gap: 30px; margin: 30px 0px; }
   .items .item { display: flex; margin: 0 0 10px 0; break-inside: avoid; align-items: flex-start; }
   .items .item .datebox { display: flex; padding-right: 5px; width: 110px; align-items: center; }

   .items .item .datebox div { color: #eb6732; text-transform: uppercase; font-size: 15px; line-height: 0.7; font-weight: 700; break-inside: avoid; }
   .items .item .datebox .weekday { width: 41px; text-align: right; padding-right: 5px; }
   .items .item .datebox .day 
   { 
      font-size: 20px; line-height: 22px; font-weight: 400; background-color: #eb6732; color: #FFFFFF; text-align: center; 
      width: 30px; height: 30px; border-radius: 50%; overflow: hidden; padding-top: 5px;
   }
   .items .item .datebox .month { padding-left: 5px; }
   .items .item .dd { align-self: flex-start; padding-top: 2px; padding-left: 5px; break-inside: avoid; }
   
   /* mobile navigation */
   
   #mobilemenu 
   { 
      position: fixed; top: 0; right: 0; left: 0; z-index: 99; height: 0px; opacity: 0; transition-duration: 0.3s;  
      background-color: #476A93; overflow: hidden;
   }
   #mobilemenu.active { height: 100vh; opacity: 1; overflow: scroll; }
   #mobilemenu a { color: #FFFFFF; display: block; font-size: 18px; line-height: 18px; padding: 6px 0px; }
   #mobilemenu ul { list-style-type: none; margin: 0px; padding: 60px 0px 0px 0px; }
   #mobilemenu ul li ul { padding-top: 0px; }
   #mobilemenu ul li ul li { margin-left: 30px; list-style-type: disc; color: rgba(255,255,255,0.5); }
   #mobilemenu ul li ul a { font-size: 16px; line-height: 16px; padding: 5px 0px; }
   
   /* search control */
   
   #searchcontrol 
   { 
      position: fixed; top: 0; right: 0; left: 0; z-index: 98; overflow: hidden; height: 0px; opacity: 0; transition-duration: 0.3s;  
      background-color: #476A93;
   }
   #searchcontrol.active { height: 190px; padding-top: 130px; opacity: 1; }
   #searchcontrol .frame { padding-bottom: 15px; }
   #searchcontrol form { display: flex; align-items: flex-end; }
   #s { border: 0; background-color: transparent; color: #FFFFFF; border-bottom: 2px dotted #FFFFFF; font-size: 22px; line-height: 22px; flex-basis: 99%; flex-shrink: 1; padding: 4px 0px; }
   #searchcontrol .btn { margin-left: 20px; font-size: 20px; line-height: 20px; padding-left: 8px; padding-right: 8px; }
   @media screen and (max-width: 600px) 
   { 
      #searchcontrol.active { height: 120px; padding-top: 66px; } 
      #s { width: 100px; }
   }
   
   .search-results p { margin-bottom: 1em; }
   
   /* wp fixes */
   
   figure.wp-block-image, figure img { display: inline-block; }
   figure { padding: 0px; margin: 0 2em 1em 0; }
   

   /* back-to-top control */
   
   a#totop 
   { 
      position: fixed; width: 100px; height: 100px; bottom: 0px; left: 50%; margin-left: -50px; margin-bottom: -55px; 
      z-index: 25; text-align: center; color: #FFFFFF; background-color: #476A93; border-radius: 50px; display: none; 
      padding-top: 8px;
   }
   a#totop::after { content: "\f062"; font: normal 30px/30px 'FontAwesome'; }
   a#totop:hover { color: #FFFFFF; background-color: #EB6732; }
   
   /* large desktop */
   
   @media screen and (min-width: 1600px)
   {
      .sections { columns: 2; column-gap: 60px; }
      section { break-inside: avoid; }
      section .shadebox { display: block; }
      .tilecats a { flex-basis: calc(16.6666% - 13.5px); }
      .slide .caption { right: auto; }
      .slide .caption p { max-width: 1000px; }
      .items { columns: 3; }
   }

   /* standard desktop + tablet landscape */
   
   @media screen and (max-width: 1220px)
   {
      .container { padding-top: 90px; }
      .frame, figure.wp-block-gallery { padding-left: 90px; padding-right: 90px; }
      #hd { height: 110px; }
      #hd a.leaf { width: 80px; }
      #hd a.malt { width: 260px; background-size: 200px auto; }
      #hd .menubox { font-size: 90%; padding-top: 10px; }
      #searchcontrol.active { height: 170px; padding-top: 110px; }
         
      #footer .frame.cols { flex-wrap: wrap; }
      #footer .frame.cols div { padding-right: 40px; }
      .instagrid a { width: 25%; }
      .instagrid a:nth-child(5) { display: none; }
   }
   
   /* header adjustments */
   
   @media screen and (max-width: 1100px) 
   { 
      .frame, figure.wp-block-gallery { padding-left: 32px; padding-right: 32px; }
      #hd a.leaf { display: none; } 
   }
   
   @media screen and (max-width: 1000px) 
   { 
      #hd a.malt { width: 150px; background: #00994D url('images/malt-mobile.svg') center center no-repeat; background-size: 110px auto; }
      .tilecats a { flex-basis: calc(33.333% - 15px); }
   }
   
   /* tablet portrait (avg 768) */
   
   @media screen and (min-width: 881px)
   {
      .mobileonly, #menu li.mobileonly { display: none; }
   }
   @media screen and (max-width: 880px)
   {
      .container { padding-top: 30px; }
      #hd { height: 50px; padding-top: 0px; xborder: 0px; }
      #hd a.malt { width: 110px; background-size: 90px auto; }   
      #topbar { display: none; }
      .nomobile, #menu li.nomobile { display: none; }
      #hd .menubox { justify-content: center; line-height: 1; padding-right: 10px; }
      #searchcontrol.active { height: 110px; padding-top: 50px; }
      #menu svg { top: 5px; }
      #footer .frame.cols div, #footer .frame.cols div.social { flex-basis: 50%; flex-shrink: 1; }
      img.right, .alignright { min-width: 200px; margin: 0 0 20px 30px;  }
      #signup form { flex-wrap: wrap; }
      #signup form input[type=text], #signup form input[type=submit] { margin: 0 5px 5px 0; flex-basis: 40%; flex-shrink: 1; flex-grow: 1; }
      #signup form input[type=submit] { text-align: center; } 
      .tilecats a { flex-basis: calc(50% - 8px); }
      .upcoming { flex-wrap: wrap; }
      .cell ul li { padding: 3px 0px; }
      .slidecontrol { display: none; }
      .slide .caption { padding-top: 20px; padding-bottom: 20px; }
      .items { columns: 1; }
   }
   
   /* phone (avg 360) */
   
   @media screen and (max-width: 600px)
   {
      body { font-size: 17px; }
      h2 { font-size: 30px; }
      h3 { font-size: 20px; }
      img.right, .alignright { min-width: 120px; margin: 0 0 10px 20px;  }
      #footer .frame.cols div { padding-right: 0px; flex-basis: 100%; }
      #signup form input[type=text], #signup form input[type=submit] { flex-basis: 90%; }

      .instagrid { flex-wrap: wrap; }
      .instagrid a { width: 50%; }
      .slide, .slide .img { height: 75vw; overflow: hidden; }
      .slide .caption { font-size: 90%; line-height: 1.2; }
      .logogrid a {width: 120px; height: 90px; }
      .malt-circle {  width: 20vw; height: 20vw; align-self: flex-start; }  
      
      .columns { flex-wrap: wrap; }
      .columns .column { flex-basis: 100%; margin: 20px; }
   }
   
   /* print */

   @media print
   {

   }