/* ============ Responsive CSS for FPI =========== */
@media (min-width: 1200px)
{
 /* use default styling */ 
}

@media (max-width: 1160px)
{
  /* nav and banner */
  nav {font-size: 16px;}
  nav ul a {padding: 0 20px;}
  .content {width: 100%;}
	.left-col-home {width: 66%;}
	.right-col-home {width: 34%;}
  #nav-wrapper .content {padding: 0;} /* remove padding from navigation container */
}

@media (max-width: 1024px)
{
  /* nav and banner */
  nav {font-size: 16px;}
  nav ul a {padding: 0 15px;}
  #fpi-logo {width: 14%;}
  #banner-button {bottom: 12%; font-size: 16px;}
  
  #resources figcaption {font-size: 17px;}
  
  /* footer */
  footer #footer-links {}
  
}

/* ========= break point for inside pages columns ========= */
@media (max-width: 900px) 
{
  #inside-main {display: block;} /* remove flex */
  .left-col {width: 100%; padding: 0px 0px 30px 0;}
  .right-col {width: 100%;}
  
  /* resources right column */
  .right-col.resources {padding: 0 0 50px 0; overflow: hidden;}
  
}

/* ========= break point for responsive menu ========= */
@media (max-width: 860px) 
{
  /* display the menu icon */
  label.menu-icon {display: block;}
  input[type='checkbox'].menu-icon + ul {display: none;} /* hide entire menu */
  input[type='checkbox']:checked.menu-icon + ul {display: block;} /* display menu when nav icon is checked */
    
  /* convert menu to full width vertical menu */
  nav {font-size: 17px; height: auto; line-height: 55px;}
  nav ul {position: absolute; right: 0; float: none; width: 100%; max-width: 350px; background: #000; transition: all .2s ease;} 
  nav ul ul {position: static; float: none; box-shadow: none;}
  nav ul li {display: block; float: none; line-height: 45px; border-bottom: 1px solid #fff;}
  nav ul li a {text-align: right;}
  nav ul li.node > a:after { right: 17px; top: 17px; } /* adjust dropdown node arrow position */
  
  #banner-button {bottom: 10%; font-size: 14px;} 
  
  #resources figure {margin-right: 12px;}
  #resources figure img {padding: 25px 30px 50px 30px;}
  #resources figcaption {font-size: 16px; bottom: 15px;}
  
  /* footer */
  footer #strip {line-height: 1.6; padding: 10px 0;}
  footer #strip #copyright, footer #strip #credit {float: none; display: block; text-align: center;}
}

/* ========= convert layout to mobile ========== */

@media (max-width: 768px) 
{
 .left-col-home, .right-col-home {display: block; width: 100%; padding: 0 0 20px 0;} /* remove right padding from left col */
 
 	/* remove flex from containers and reduce padding */
  #intro {display: block; padding-top: 20px}
  
  #resources-strip {padding-top: 0px;} /* padding is provided by right col above */
  #resources figure {margin-right: 8px;}
  #resources figcaption {font-size: 14px; bottom: 10px; padding: 0 8px;}
  
  #resource p {width: 100%; max-width: 100%;}
  
  #whats-new-events {display: block; padding-top: 20px}
  #events.right-col-home {padding-bottom: 0} /* remove double padding from events box */

	footer {margin-top: 30px} /* reduce vertical padding */
}

@media (max-width: 640px) 
{
  #banner-button {display: none;}
  #resources figure a {overflow: hidden;}
  #resources figure {margin-right: 5px;}
  #resources figcaption {font-size: 14px; bottom: 10px; padding: 0 8px;}
  #resources figure img {padding: 25px 20px 50px 20px;}
  
  #contactForm ul li {margin-bottom: 15px;}
  #contactForm label {float: left; width: 100%; line-height: 35px;}
  #contactForm input[type="text"] {width: 100%; }
	#contactForm textarea {width: 100%;}
  #buttonsContainer {text-align: center;}
  #buttonsContainer input {margin: 0;}
 
 	footer #top {padding: 20px 0;}
 	footer #footer-links {flex-direction: column; justify-content: center;}
	footer #footer-links h4 {text-align: center; font-weight: bold;}
	footer #footer-links ul {margin-bottom: 20px;}
	footer #footer-links ul li {text-align: center;}
	footer #footer-links ul.sublinks li {padding: 0; background: none;} /* remove bullets */
  
  /* home page poster */
  .left-col-home figure {width: 35%;}
}

@media (max-width: 500px) 
{ 
  /* home page poster */
  .left-col-home figure {width: 40%;}
}

@media (max-width: 425px) 
{ 
  #resources {display: block;}
  #resources figure {width: 100%; height: 60px; margin: 0 0 5px 0; overflow: hidden; position: relative; }
  #resources figure img {float: left; height: 60px; padding: 10px 10px;}
  #resources figure figcaption {width: auto; font-size: 18px; line-height: 60px; height: 60px; position: absolute; left: 75px; top: 0; margin:0; padding:0; }
  
  .left-col.videos article {float: none; margin: 0 0px 30px 0; max-width: 313px;}
  #fpi-logo {width: auto; height: 55px;}
  
  /* make buttons 100% */
  #buttonsContainer input {width: 100%;}
  #resource p a {width: 100%}
  
  
  
}