/*
Theme Name: aapip
Description: A theme built on io blankslate; mobile styles
ioblankslate WordPress Theme © 2021 Imaginary Office
*/

/* MEDIA QUERIES */

@media screen and (max-width: 1200px){
  
  html , body {  font-size: 16px;  }
  body {width:100vw; }
  
  #content.results-page { padding: 0 20px; margin-top: 120px; }
  .gallery {/*width: 90%;*/ max-width:100%; margin: 50px 0 0 0 }
  .post-hero-content p.wp-caption-text {max-width:100%; padding: 0 5%;}
  .chapter-page a.tab { padding: 12px; }
  .chapter-page span.section-name,
  .chapter-page .header h1,
  .chapter-page .tab-container,
  .chapter-page .share-icons-container.article {max-width:90%; margin:0 5%;}
  
  #footer .footer-content {max-width: 90%; }
  
  #breadcrumbs .breadcrumb-content {max-width:none; }
  
}

@media screen and (max-width: 1024px){
  
  .header.photo-banner {max-height: 650px; }
  
  .header.photo-banner .page-title-container {width:90%; margin:80px 5% 50px 5%;}
  
  #container .entry-content,
  .entry-content,
  #container #content.child-page .entry-content,
  #container .entry-content.landing-pages,
  .query-results.jobs-board-results,
  #content.posts-only article.resources header, 
  #content.posts-only article.resources footer,
  .featured-events {
    width:90%;max-width:none; margin: 0 5% 50px 5% ;}
    
    #container  #content.child-page header, .header.child-page {margin:0 5%;width:90%;}
    #breadcrumbs {padding:30px;}
    #content.posts-only header, #content.posts-only footer,
    #content.posts-only article.resources header, 
    #content.posts-only article.resources footer {margin:50px auto;}
    
    /* landing pages */
    .header.photo-banner p,
    .header.photo-banner.chapter-overview p  { padding: 20px 10% 0 0; }
    
    /* home page */
    .home #container .entry-content {width:100%; max-width:90%; margin:0 5%; padding:0; margin-top:100px;}
    
    #footer .footer-content{padding:20px 0 0 0;}
    
    .promo.full-width,
    .related-content-container {padding: 20px 5%;}
    
    .promo-allpurpose-item,
    .logos-container,
    .promo-quote-item {margin:0; padding:0;}
    .promo.full-width.join-us { padding: 0; }
    
    .promo-joinus-item .text-container { padding: 40px; }
    .promo-blockquote h2 {font-size:1.7rem;}
    .slanted {padding: 50px;}
    .flex-text-block {margin: 0;}
    .promo.full-width.notice {margin: 0;}
        
    #container aside.resources-post .image-container {height:300px;}
    
    
    #header{height: 80px; padding:0;}
    #container {margin: 80px auto 0 auto;}
    
    #mobile-toggle {display:block;}
    .fa-bars{display:block;}
    /*   .fas.fa-times{display:none;} */
    
    #header .header-content {
      max-width: 100%; margin: 0; padding:10px 5%;
    }
    #site-description {display:flex; flex-direction:row; align-items:center; text-indent: 0; width: 100%; font-size:0.9rem;}
    
    .branding{ width:fit-content; display:inline-block; margin-right:20px; margin-top:10px;}
    #header .branding .logo {
      width: 150px; 
      height: 50px;
    }
    
    /* .header-container-right is display block from the toggle script */
    .header-container-right { 
      float:none; margin:0; 
      max-width:none; 
      width:100vw; 
      position:fixed; 
      top:80px; 
      left:0;
      z-index:1001;
      /* background:#404040; */
      background:#000000;
      height:100%;
      overflow-y:auto;
      display: block; 
      padding: 0 50px; 
    }
    
    .fas.mobilehidden, .header-container-right.mobilehidden { display: none; }
    
    .header-links {
      display:block;
      text-align:left; 
      /* background:#404040;  */
      background:#000000;
      padding-top:10px;
      position:relative;
      /* position:absolute; bottom:0; */
      /* display:none; */
    }
    .header-links:after {display:none; }
    
    #header .action-links, #header .social {display:block;}
    #header .action-links { margin: 0; }
    #header .social { 
      float: right; margin-left: 12px; color: white; 
      padding:10px 30px; width: 100%; margin-bottom: 8px; 
      display:none;
    }
    #header .action-links li{display:block;margin:0;width:100%;padding:10px; 
      /* background: #404040;  */
      background:#000000;
      color:#ffffff;}
      #header .action-links li a {padding:0; color:var(--electric-green);}
      #header .action-links li:focus {background: var(--dark-purple); color:#ffffff;}
      #header .action-links li {padding:10px 30px; font-size:1.2rem;}
      #header .action-links { padding: 10px 0; 
        /* background: #404040;  */
        background:#000000;
        /* display:none; */
      }
      .social{float:none;}
      
      #header #search-header {
        /* display: block; */
        width: 100%;
        padding:10px 30px;
        background:var(--dark-purple);
        margin-bottom:20px;
        display:none;
      }
      #header #search-header form.search-form {padding:0;}
      #header #search-header i {width:fit-content; #ffffff; padding:0;}
      #header #search-header input[type=search] {
        width: 100%; 
        min-width:250px;
        height:42px;
        border:none;
        border-bottom: 2px solid #ffffff;
        background-color:transparent;
      }
      #header #search-header input[type=search]::placeholder{
        color:transparent;
      }
      
      .menu-main-menu-container {margin-top:10px;}
      
      /* #menu{float:none;margin:0;padding:20px 0;} */
      
      #menu-main{float:none;background:transparent;flex-wrap:wrap;position:relative;}
      
      ul#menu-main.ui-menu {flex-direction:column; }
      
      #menu-main li.ui-menu-item {width: fit-content; display:block; font-size:1rem; padding:10px 30px; margin-right:0;}
      
      #menu-main li a {padding:10px 30px; color:white;}
      
      #menu-main ul.sub-menu {width:100%; position:relative!important; top:auto!important; right:auto!important; left:0!important; border:0!important; margin-top:10px;}
      
      #menu-main ul.sub-menu li {padding:0;}
      
      #menu-main ul.sub-menu li a {background:transparent; text-transform:none; letter-spacing:0; color:#ffffff; background:transparent!important;}
      
      #menu-main .sub-menu {display:none; position:relative; left:0; z-index:auto;}
      
      .ui-menu .ui-menu-icon {
        border:1px solid var(--electric-green)!important;
      }
      .ui-menu .ui-icon,
      .ui-menu .ui-menu-icon {
        right:-25px !important;
      }
      .ui-menu .ui-state-active,
      .ui-menu .ui-widget-content .ui-state-active,
      .ui-menu .ui-widget-header .ui-state-active,
      .ui-menu a.ui-button:active,
      .ui-menu  .ui-button:active,
      .ui-menu .ui-button.ui-state-active:hover {
        background: transparent!important;
      }
      
      #menu-main li a.ui-menu-item-wrapper {font-size:1.2rem; }
      
      /* start the responsive home carousel */
      .main-carousel{ height:700px; }
      .carousel-cell {
        flex-direction:column;
        background: linear-gradient(220deg, #65981D, #7FC1A5, #76438D);
      }
      .slide-image, 
      .slide-text-container {
        width:100%;
      }
      .slide-text-container {
        max-height:35%;
        background:transparent;
        padding:30px 70px;
      }
      .flickity-page-dots {
        text-align:center!important;
        padding-left:0!important;
      }
      
      #content.flexible-template header,
      #content.flexible-template footer {width:90%; max-width: none; margin:30px 5%;}
      
      .postobject-single li.related-thumbnail {width:100%; height:auto; min-height:200px;}

      .home .blocks {max-width:90%; margin:100px 5%; }
      
    }
    
    
    @media screen and (max-width: 768px){
      #footer .search-form, #footer .search-form form {padding:0;}
      #footer .search-form form.search-form input[type="search"] {
        min-width: none;
        width:calc(100% - 20px);
      }
      
      .promo-allpurpose-item {
        max-width:100%; 
        flex-direction:column;
      }
      .promo-allpurpose-item .text-container,
      .promo-allpurpose-item .image-container {
        flex:100%;
        margin:0 auto;
      }
      .promo-allpurpose-item .text-container {padding:30px;}
      
      .header-container-right { display: block; padding: 0 30px; }
      
      #content.posts-only header, 
      #container .entry-content.posts-only,
      #content.posts-only footer {width:90%; max-width:none; margin-left:auto; margin-right:auto;}
      
      .query-results.news-results{
        width:100%; max-width:100%; margin:0;}
        body:not([class^="paged"]) .query-results.news-results div.news-list-item:nth-child(1){margin-bottom:50px;}
        body:not([class^="paged"]) .query-results.news-results div.news-list-item:nth-child(1) .image-container {height:auto;}
        .news-list-item {padding:0 50px;}

        .featured-events ul li {padding:0 50px;}
        
        .gallery-item {width:100%;}
        
      }
      
      @media screen and (max-width: 767px){
        
        #container {margin: 80px 0 0 0;}
        .header.child-page { padding: 20px 0;}
        
        .header.photo-banner, .header.photo-banner.chapter-overview {max-height: none; }
        .header.photo-banner.chapter-overview h1, .header.photo-banner.chapter-overview p { padding-right: 20px;}
        .header.photo-banner.chapter-overview h1 { padding:0; font-size:3rem;}
        
        .columns-container{flex-direction:column; padding: 20px 0 0 0;}
        #footer p,
        #footer .address.header,
        button.call, button.email {font-size:1rem;}
        
        button.call, button.email {margin: 10px 20px 10px 0;}
        #footer p, #footer li {margin: 0 0 10px 0;}
        
        .address{margin:0 0 10px 0;}
        .footer-left, .footer-middle, .footer-right {width: 100%; padding: 10px;}
        .footer-left p, .footer-left .contact {display:block;padding-right:10px;}
        .footer-middle {text-align:center;}
        .fineprint, .fineprint-container-right {width:100%;}
        .fineprint-container-right {display:block;float:none;margin-top:10px; margin-bottom:20px;}
        
        #footer form.search-form i {display:none;}
        
        #footer .social {display: inline-block;margin: 0 0 10px 0; margin:0 10px 20px 0; float:left;}
        .social i {font-size:1.5rem; padding: 7px 14px;}
        
        /* .promo.full-width.join-us { padding: 0; } */
        .flex-text-block .text-container { padding: 50px 0; }
        .blocks .promo.full-width.patterned:nth-child(odd) .image-container {float:none;}
        
        li.logos-list-item {width:33%; padding: 15px;}
        
        .news-list-item {flex-direction:column;}
        .news-list-item {padding:0;}
        .query-results.news-results .image-container {
          width:100%;
          max-width:400px;
          height:auto;
          margin-right:0;
          margin-bottom:20px;
        }
        .query-results.news-results .text-container {width:100%;}
        
        .jobs-board-results {max-width:100%;}
        
        .postobject-single {width:100%; margin:0; display:block; float:none;}
        
        .wp-caption {display:block;float:none;margin-right:0;margin:0 auto;width:100%;}
        .post-hero-content p.wp-caption-text {width:100%;float:none;display:block;}
        
        .post-hero-content .share-container {width:70%; display: block; float: none; }
        .post-hero-content .share-container #share { float: left; }
        
        #container .entry-content.resources-post .the-content,
        #container aside.resources-post {display:block; width:100%; float:none; margin-top:20px;}
        #container aside.resources-post .image-container {background-size:contain;}
        
        .promo-joinus-item .image-container,
        .promo-joinus-item .text-container {display:block; float:none; width:100%; height:auto;}
        .promo-joinus-item .image-container {height:310px;}
        
        .featured-posts ul {flex-direction:column;}
        .featured-posts ul li {width: 100%; margin:10px 0;}
    

        #container .entry-content .team-posts ul {flex-direction:column;}
        .team-posts li {display: block; width: 100%;}
        .team-posts .image-container {width:80%;padding-top: 80%; /* 1:1 image container*/ margin-left:auto; margin-right:auto;}
        
        #content.posts-only.team-posts .image-container {width:80%;padding-top: 80%; /* 1:1 image container*/ display:block;}
        #content.posts-only.team-posts .text-container {display:block; width:100%; margin-left:0;}
        
        #container .entry-content ul.members-list-grid,
        #container .entry-content ul.values {flex-direction:column; }
        #container .entry-content ul.members-list-grid li,
        #container .entry-content ul.values li {width:100%; height:auto; margin:2px 0;}
        
        #container .entry-content.events-page {margin: 0 auto;}
        
        /* home hero */
        .home-hero {height:auto;margin:0;}
        .entry-content .home-hero li.slide-image-home-captioned {height:auto;display:block;}
        .home-hero .slide-text-container {width:90%; }
        
        #content.results-page.no-image .entry-summary p,
        #content.results-page.no-image article header {width:100%; display;block; float:none;}
        
        
        /* quotes */
        
        .promo-quote-item .text-container { padding: 0;}
        
        .promo-quote-item .text-container p {
          font-size: 1.125rem;
          line-height: 1.3;
        }
                
        .chapter-page .tab-container {padding:20px 0;}
        .chapter-page a.tab {width:90%; margin:10px; display:block; text-align:center;}
        #jumplist-wrapper.closed, #jumplist-wrapper {display:none;}
        .chapter-page .promo.full-width {padding:0;}
        .chapter-page .promo.full-width .text-container {padding:20px;}
        
        .chapter-page .promo.full-width,
        .chapter-page .patterned.testimonial {width:110%; margin-left: -5%; margin-right:0; padding-top: 20px;}
        .chapter-page .promo-allpurpose-item.testimonial .text-container {width:100%;padding:20px 40px;}
        .chapter-page .promo-allpurpose-item.testimonial .image-container {padding: 20px 0;}
        ul.chapter-goals li {width:100%;}
        
        body:not([class^="paged"]) .query-results.news-results div.news-list-item:nth-child(1) .text-container,
        body:not([class^="paged"]) .query-results.news-results div.news-list-item:nth-child(1) .image-container {
          width:100%; margin-right:0;
        }
        .tribe-events-content, .tribe-events-event-image {padding:0;}
        
        .main-carousel{ height:600px; }
        .slide-text-container {
          max-height:60%;
          padding:30px 50px;
        }
        
        body:not([class^="paged"]) .query-results.news-results div.news-list-item:nth-child(1) .image-container .default-thumbnail { width:100%; max-width:400px; height:auot; max-height:300px;}
        
        .entry-content .multicolumn-layout ul {flex-direction:column; justify-content:center; }
        
        .related-content-container{max-width:100%; margin:80px 0; }
        .postobject-single {width:100%; margin:0; display:block;}
        .postobject-single li.related-thumbnail {width:100%; height:auto; margin:0 auto 1rem auto;}
        .postobject-single li.related-thumbnail .default-thumbnail {width:100%; height:auto; min-height:200px;}
        
        .flex-block.logo-gallery {max-width:none; margin:80px 0;}
        .flex-block.logo-gallery ul {align-content:center; justify-content:center; justify-content:center; margin:0;}
        .flex-block.logo-gallery li {width:33.33%; padding: 10px;}
        .flex-block.logo-gallery li img {max-width: 200px;}
        
        .flex-block.accordion-block {max-width:none; margin:80px 0;}
        
        .featured-events ul li {padding:0;}

        .home .blocks {margin:50px 5%; }

      }
      
      @media screen and (max-width: 600px){
        
        .results-page .entry-summary img {display:none;}
        .results-page .entry-summary p,
        .results-page article header {width:100%; display:block;}
        
        #header .header-content {padding:10px 15px;}
        
        #site-description {width:calc(100% - 40px);}
        #header .branding .logo {width:130px;}
        
        #menu-main ul.sub-menu li a {padding:10px;}
        
      }
      
      @media screen and (min-width: 1441px){
        .patterned { margin: 0 auto;}
        .home #container .entry-content {background: transparent;}
        /* .home-page .header {background: RGBA(0,0,0,0.5);} */
        .home-page .header {
          background-color: #333333;
          /* background-image: url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%23383838' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); */
        }
        .main-carousel {max-width:1440px; margin:0 auto;}
      }
      
      @media print {
        
        html , body {  font-size: 11px;  }
        .donotprint { display: none; }
        .printonly { display: block; }
        
        /* do not print */
        #header, #footer, #slide-links, .header-container-right, iframe, #share, .promo.full-width, .flickity-button {
          display: none !important; }
          
          /*show urls after the link*/
          p a:after, h3 a:after {
            content: " (" attr(href) ")";
            font-size: 80%;
          }
          p a, h3 a {
            word-wrap: break-word;
          }
          
          /* adjust styles for print */
          #container { margin-top: 0; }
          .wp-caption {display:block;float:none;}
          .print-header {display:block;width:100%;height:auto;font-size:1rem;}
          .print-header img {width:100px; height:auto; opacity:0.5;}
          
          .header.photo-banner, .header.photo-banner.chapter-overview {height:auto;margin-top:0;margin-bottom:0;background-image:none!important;background-blend-mode:none!important;}
          .header.photo-banner .page-title-container,
          .header.photo-banner .post-hero-content,
          .header.photo-banner.chapter-overview .page-title-container {display:block;width:100%;height:auto;margin:0; position:relative;}
          .header.photo-banner .page-title-container h1,
          .header.photo-banner .page-title-container p,
          .header.photo-banner .post-hero-content p,
          .header.photo-banner.chapter-overview .page-title-container h1,
          .header.photo-banner.chapter-overview .page-title-container p,
          {padding:20px 0;text-shadow:none;color:#000000;}
          
          /* home print styles */
          .slide-text-container { width: 90%; max-width: none; }
          .slide-image { display: none; }
          .main-carousel {height:auto;}
          
          
          .ui-accordion-content { display: block !important; }
          
        }