@media all and (max-width: 991px) { /* Phones and tables */ 
  #footer {
      position: relative;
  }
  #wrapper { 
    min-height: 100%;
    padding-bottom: 0;
  }
}

@media all and (min-width: 768px) { /* Wider than phones */
  
  #logo {
    height:150px;
    vertical-align:top;
    float:left;
  }
  #logo, #logo * {
    height:150px;
  }
  #logo img {
    max-height:150px;
    height:150px;
    width:auto;
    float:left;
  }
}

@media all and (min-width: 992px) { /* Desktops */ 
  #wrapper { 
    padding-bottom: 308px; 
    min-height: calc(308px + 100%); 
  }
  }

@media all and (max-width: 767px) { /* Phones */
    #logo img {
      width:100%;
      max-width:375px;
    height:auto;
    max-height:none;
  }

}

@media all and (min-width: 768px) and (max-width: 991px) { /* Tablets */ }

@media all and (min-width: 992px) and (max-width: 1199px) { /* Small desktops */ }

@media all and (min-width: 1200px) { /* Large desktops */ }