div {
  box-sizing: border-box; }

.center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

#container {
  min-height: 100vh;
  width: 100%; }

@media (max-width: 640px) {
  #container {
    width: 100%; }

  #h-1, #h-2, #h-3, #f-1, #f-2, #f-3, #f-4, #f-4-1, #f-4-2 {
    width: 100%; }

  #h-1 {
    order: 1; }

  #h-3 {
    order: 2; }

  #h-2 {
    order: 3; } }
@media (min-width: 640px) and (max-width: 960px) {
  #h-1, #h-3, #f-1, #f-2, #f-3, #f-4 {
    width: 50%; }

  #h-2, #f-4-1, #f-4-2 {
    width: 100%; }

  #h-1 {
    order: 1; }

  #h-3 {
    order: 2; }

  #h-2 {
    order: 3; } }
@media (min-width: 960px) and (max-width: 1280px) {
  #f-1, #f-2, #f-3 {
    width: 33.33%; }

  #h-1, #h-3, #f-4-1, #f-4-2 {
    width: 50%; }

  #h-2, #f-4 {
    width: 100%; }

  #h-1 {
    order: 1; }

  #h-3 {
    order: 2; }

  #h-2 {
    order: 3; } }
@media (min-width: 1280px) {
  #h-1, #h-3, #f-1, #f-2, #f-3, #f-4 {
    width: 25%; }

  #h-2 {
    width: 50%; }

  #f-4-1, #f-4-2 {
    width: 100%; }

  #container {
    display: flex;
    flex-flow: column; }

  #header {
    flex: 0 1 auto; }

  #main {
    flex: 1 1 auto; }

  #footer {
    flex: 0 1 auto; } }
#header, #main, #footer, #f-4 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; }