/* - responsive.css - */
@media all {
/*  (do not remove this :) */
/*  (not this either :) */

@media only screen and (max-width:1200px) {
  body { font-size:105%; }
  .centerBlock { padding:0 2.5em !important; }
}

@media only screen and (max-width:1000px) {
  body { font-size:100%; }
  .centerBlock { padding:0 2em !important; }

  .section-vendors #MapContainer { width:100%; margin-left:0; }

  .template-sec_contact-info #aesthetic { opacity:0.1; }
}

@media only screen and (max-width:800px) {
  .centerBlock { padding:0 1.5em !important; }
  
  #portal-header { justify-content:space-between; }
  #portal-searchbox { width:100%; font-size:90%; }
  #portal-searchbox form { margin-right:0; }
  #portal-tagline { display:none; }
  #portal-globalnav { font-size:90%; justify-content:space-between; }
  #portal-globalnav li#portaltab-index_html { display:none; }
  #portal-columns-wrapper { margin-top:24px; }
  #portal-columns { flex-direction:column-reverse; }
  #portal-column-one,
  #portal-column-two { width:100% !important; margin:0 !important; }
  #portal-admin { display:none; }
  #portal-footer-wrapper { padding-top:24px; }
  #portal-footer { max-width:100%; }

  .portlet { margin-top:24px; }
  .portlet h3 { text-align:center; }
  .portlet ul { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-around; }
  .portlet ul li { text-align:center; flex-basis:calc(100% / 3 - 1em); margin:4px 0.5em; }

  #MapSearchForm { width:100%; }
  #MapSearchForm fieldset { padding:0 1em 18px !important; }
  #MapSearchForm fieldset legend { padding-top:12px !important; }
  #MapSearchForm .flexRow { font-size:90%; }

  .template-home_view #Scout { display:none; }
  .template-add_business_view form[name="add_business_form"],
  .template-sec_contact-info form[name="feedback_form"] { width:100%; min-width:auto; }
}

@media only screen and (max-width:600px) {
  .centerBlock { padding:0 1em !important; }

  #portal-header { flex-direction:column; padding-top:12px !important; }
  #portal-logo { width:100%; text-align:center; font-size:150%; line-height:125%; margin:8px 0; }
  #portal-searchbox form { margin-left:0; }

  #portal-navigation-wrapper { border-radius:12px 12px 0 0; background:#b3803e; position:fixed; left:0; right:0; bottom:-100%; z-index:1000; }
  #portal-navigation-wrapper.open { bottom:0 !important; }

  #portal-globalnav-toggle { display:block; }
  #portal-navigation-wrapper.open #portal-globalnav-toggle { margin:0; }
  #portal-navigation-wrapper.open #portal-globalnav-toggle > div:nth-child(1) { width:18px; transform:rotate(45deg); -webkit-transform:rotate(45deg); bottom:-36px; right:6px; }
  #portal-navigation-wrapper.open #portal-globalnav-toggle > div:nth-child(2) { width:3px; height:36px; }
  #portal-navigation-wrapper.open #portal-globalnav-toggle > div:nth-child(3) { width:18px; transform:rotate(315deg); -webkit-transform:rotate(315deg); bottom:13px; left:6px; }

  #portal-globalnav { flex-direction:column; margin:0 0 12px; }
  #portal-globalnav li { background:transparent !important; width:100%; margin:0 0 12px; border-radius:12px; overflow:hidden; }
  #portal-globalnav li a { background:#683a26 !important; color:#f4e4c6; font-family:'Staatliches', cursive; font-size:166%; line-height:125%; text-align:center; text-transform:uppercase; padding:6px 0; }

  form fieldset > .flexRow { flex-direction:column; align-items:flex-start; }
  form fieldset > .flexRow .field { margin-left:0 !important; }
  form #captcha-wrapper { flex-direction:column; align-items:flex-start; }
  form #captcha-wrapper input[type="text"] { width:100% !important; margin-left:0 !important; }

  .template-map_view #ClosestVendors { width:100%; height:100%; margin:0; padding-top:12px; }
  .template-map_view #ClosestVendors .actions a.toggle { display:block; -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; }
  .template-map_view #ClosestVendors .actions a img { width:28px; height:28px; }

  .template-map_view #ClosestVendors.closed { height:48px; overflow:hidden; }
  .template-map_view #ClosestVendors.closed .actions a.toggle { -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); }

  .template-state_folder_view .flexRow.main { flex-direction:column; }
  .template-state_folder_view .flexRow.main .flexItem.left { width:100%; margin:0; }
  .template-state_folder_view .flexRow.main .flexItem.right { width:100%; margin:24px 0 0; }
  .template-state_folder_view .flexRow.main .flexItem.right > img:last-child { display:none; }

  .template-vendors_view #Vendors { flex-direction:column-reverse; }
  .template-vendors_view #Vendors #VendorListWrapper,
  .template-vendors_view #Vendors #VendorSearch { width:100%; margin:0; }

  .template-resources_view #StateMap { width:100%; }
}

@media only screen and (max-width:500px) {
  #portal-logo { font-size:133%; line-height:125%; }
  #MapCanvas .gm-style .gm-style-iw-c { max-width:300px !important; }
}

@media only screen and (max-width:400px) {
  #portal-logo { font-size:120%; line-height:125%; }
}

@media only screen and (max-device-width:320px) {
  .centerBlock { padding:0 12px !important; }

  #portal-logo { font-size:100%; line-height:125%; }

  form input[type="text"], 
  form input[type="password"], 
  form textarea, 
  form select { padding:4px 0.5em; }

  form #captcha-wrapper a { width:100%; }
  form #captcha-wrapper img { width:calc(100% + 2px) !important; }
}

/*  */
}