/* ---------------------------------------
	Responsive design code
-----------------------------------------*/

@media screen and (max-width: 1024px) {

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .container {
    width: 950px !important;
  }

  .hidemobile4 {
    display: none !important;
  }

}

@media screen and (max-width: 950px) {

  .container {
    width: 758px !important;
  }

  .hidemobile3 {
    display: none !important;
  }

}

@media screen and (max-width: 758px) {

  .container {
    width: 524px !important;
  }

  .hidemobile2 {
    display: none !important;
  }

  #topMenu .flexiblemodule {
    width: 100% !important;
  float: none;
  }
  #topMenu .flexiblemodule > div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #banner {
    height: auto !important;
  }
  #banner .logobloc {
    float :none !important;
    width: auto !important;
  }
  #banner img {
    display :block !important;
    margin: 0 auto !important;
  }
  #slideshow {
    height: auto !important;
  }
  #slideshow .logobloc {
    float :none !important;
    width: auto !important;
  }
  #Feature {
    height: auto !important;
  }
  #Feature .logobloc {
    float :none !important;
    width: auto !important;
  }
  #modulestop .flexiblemodule {
    width: 100% !important;
  float: none;
  }
  #modulestop .flexiblemodule > div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #SocialMedia {
    height: auto !important;
  }
  #SocialMedia .logobloc {
    float :none !important;
    width: auto !important;
  }
  #maincontent .column {
    width: 100% !important;
    clear:both;
    float:left
  }
  #maincontent .column1 div.inner, #maincontent .column2 div.inner {
    /*overflow:hidden;*/
  }
  #maincontent .column div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .items-row .item, .column {
    width: auto !important;
    float: none;
    margin: 0 !important;
  }

  .column div.moduletable, .column div.moduletable_menu {
    float: none;
    width: auto !important;
    /*margin: 0 !important;
    padding: 0 !important;*/
  }

  /** specifique au formulaire de contact **/
  .contact form fieldset dt {
    max-width: 80px;
  }

  .contact input, .contact textarea {
    max-width: 160px;
  }#modulesbottom .flexiblemodule {
    width: 100% !important;
  float: none;
  }
  #modulesbottom .flexiblemodule > div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #footer {
    height: auto !important;
  }
  #footer .logobloc {
    float :none !important;
    width: auto !important;
  }

}

@media screen and (max-width: 545px),
screen and (max-device-width: 545px) {

  .container {
    width: 292px !important;
  }
  .hidemobile1 {
    display: none !important;
  }

  #hbi-topnav li {
    font-size: 14px;
    padding: 4px 10px;
  }
  #hbi-topnav li.item-23 {
    padding: 4px 10px;
  }
  input#mod-search-searchword {
    width: 100%;
  }
  div.search label {
    display: none;
  }

  #bannermenu ul.menu li {
    width: 100%;
  }
  #bannermenu ul.menu > li > a,
  #bannermenu ul.menu > li > span.separator,
  #bannermenu ul.menu > li:hover > a {
    padding: 12px;
    height: auto;
  }

  /*handle submenus*/
  #bannermenu ul.menu li:hover > ul {
    float: none;
    width: 100%;
    position: static;
    left: auto;
    z-index: auto;
  }

  #hbi-sitemap > li.parent {
    width: 50%;
    clear: both;
  }

  #topMenu .flexiblemodule {
    width: 100% !important;
    float: none;
  }
  #topMenu .flexiblemodule > div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #banner {
    height: auto !important;
  }
  #banner .logobloc {
    float: none !important;
    width: auto !important;
  }
  #banner img {
    display :block !important;
    margin: 0 auto !important;
  }
  #slideshow {
    height: auto !important;
  }
  #slideshow .logobloc {
    float :none !important;
    width: auto !important;
  }
  #Feature {
    height: auto !important;
  }
  #Feature .logobloc {
    float :none !important;
    width: auto !important;
  }
  #modulestop .flexiblemodule {
    width: 100% !important;
    float: none;
  }
  #modulestop .flexiblemodule > div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #SocialMedia {
    height: auto !important;
  }
  #SocialMedia .logobloc {
    float :none !important;
    width: auto !important;
  }
  #maincontent .column {
    width: 100% !important;
    clear: both;
    float: left
  }
  #maincontent .column1 div.inner,
  #maincontent .column2 div.inner {
    /*overflow:hidden;*/
  }
  #maincontent .column div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .items-row .item, .column {
    width: auto !important;
    float: none;
    margin: 0 !important;
  }

  .column div.moduletable, .column div.moduletable_menu {
    float: none;
    width: auto !important;
    /*margin: 0 !important;
    padding: 0 !important;*/
  }

  /** specifique au formulaire de contact **/
  .contact form fieldset dt {
    max-width: 80px;
  }

  .contact input, .contact textarea {
    max-width: 160px;
  }
  #modulesbottom .flexiblemodule {
    width: 100% !important;
    float: none;
  }
  #modulesbottom .flexiblemodule > div.inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #footer {
    height: auto !important;
  }
  #footer .logobloc {
    float :none !important;
    width: auto !important;
  }

  /*donation page*/
  #crm-container.crm-public .crm-section .content {
    float: left;
    margin-left: auto;
  }
  #crm-container .crm-section .label {
    text-align: left;
  }
  #crm-container .credit_card_info-section {
    width: auto;
  }
}