html{
    background: #fff;
}

h1,h2{
    font-family: 'Muli', sans-serif;
    color: #484848;
    margin: 0.1em 0 .1em 0;
}

h2{
    font-size: .8em;
}

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 50%;
}

img.products{
    max-width: 100%;
}

img.logo{
    max-width: 200px;
}

img.flag {
    max-width: 3em;
    opacity: 0.9;
    margin: 0 3px;
}

img.flag:hover {
    opacity: 1;
}

@media screen and (max-width: 1100px) {
    .inner {
        width: 60%;
    }
}

@media screen and (max-width: 900px){
    .inner {
        width: 70%;
    }
}

@media screen and (max-width: 700px) {
    .inner {
        width: 80%;
    }
}

@media screen and (max-width: 500px) {
    .inner {
        width: 90%;
    }
}