* {
  margin  : 0;
  padding : 0;
  color   : #263238;
}

html, body {
  height : 100%;
  min-width: 320px;
}

body {
  font-family : "Trebuchet MS", Helvetica, sans-serif;
  font-size   : 1.2em;
}

.main {
  display        : flex;
  flex-direction : column;
  min-height     : 100%;
}

h2, h3, h4, h5 {
  margin-bottom : 15px;
  color         : #546e7a;
}

h2 {
  font-weight : normal;
  color       : #ff8a65;
}

h5 {
  color : #ff8a65;
}

a {
  text-decoration : none;
  color           : #00acc1;
}

header {
  padding          : 0;
  background-color : #fbe9e7;
  box-shadow       : 0 0 8px rgba(0, 0, 0, .3);
  position         : fixed;
  width            : 100%;
  text-align       : center;
  z-index          : 2;
  display          : flex;
  align-content    : center;
  align-items      : center;
  place-content    : center space-between;
}

header h1 {
  font-size : 1.5em;
  color     : #e64a19;
  padding   : 20px 20px;
}

header a {
  color : #00838f;
}

header ul li {
  display        : inline-block;
  padding        : 8px 20px;
  text-transform : uppercase;
  font-size      : 1em;
}

header ul.logos {
  padding-right : 10px;
}

header ul.logos li {
  padding : 0 10px;
}

header ul li a {
  color           : #00838f;
  text-decoration : none;
  display         : flex;
  align-items     : center;
}

header ul.logos li a i {
  color : #00838f;
}

header ul li.active a {
  color  : #ff8a65;
  cursor : default;
}

.title-h2 {
  margin-top: 110px;
}

.container {
  flex-grow : 1;
}

.search {
  display       : flex;
  margin-top    : 110px;
  align-items   : center;
  place-content : center;
  margin-bottom : 20px;
}

.search #match {
  max-width     : 400px;
  width         : 90%;
  padding       : 15px 20px;
  font-size     : 18px;
  border-radius : 10px;
  border        : 1px solid #cfd8dc;
}

.center {
  text-align : center;
}

p {
  margin-bottom : 10px;
  font-size     : .8em;
  line-height   : 1.3;
}

.block {
  background-color : #eceff1;
  margin-bottom    : 30px;
}

.icons-preview {
  line-height      : 0;
  padding          : 10px;
  background-color : #fbe9e7;
  display          : flex;
  align-items      : center;
}

.icons-code {
  padding    : 20px;
  text-align : center;
}

.row {
  display        : flex;
  flex-direction : row;
  align-items    : stretch;
}

.some-class:before {
  content   : "\E0BA";
  font-size : 48px;

}

.geira-icons {
  font-size : 48px;
}

#icons {
  height        : 100%;
  min-height    : 100%;
  min-width     : 100%;
  width         : 100%;
  flex-flow     : row wrap;
  box-sizing    : border-box;
  display       : flex;
  place-content : center;
}

.icon {
  flex       : 1 1 10%;
  box-sizing : border-box;
  max-width  : 10%;
  padding    : 10px;
  list-style : none;
}

.icon > div {
  height         : 100%;
  min-height     : 100%;
  min-width      : 100%;
  width          : 100%;
  place-content  : center;
  align-items    : center;
  flex-direction : column;
  box-sizing     : border-box;
  display        : flex;
  border         : 1px solid #eceff1;
  border-radius  : 10px;
  padding        : 10px 5px 5px;
}

.icon i {
  color : #d84315;
}

.icon span {
  margin      : 5px 0;
  font-size   : .6em;
  font-weight : bold;
  color       : #b0bec5;
}

span.name {
  font-size : .8em;
  color     : #455a64;
}

span.tags {
  display : none;
}

#quantity {
  color            : #90a4ae;
  font-size        : .8em;
  background-color : #ffffff;
  padding          : 2px 5px;
  margin-left      : 4px;
  border-radius    : 5px;
}

#version {
  font-size : .4em;
  color     : #546e7a;
}

footer {
  background-color : #fbe9e7;
  padding          : 15px;
  text-align       : center;
  margin-top       : 40px;
}

footer p {
  margin    : 0;
  font-size : .6em;
  color     : #607d8b;
}

@media all and (max-width: 1400px) {
  .icon {
    flex       : 1 1 16.6%;
    max-width  : 16.6%;
  }
}

@media all and (max-width: 1100px) {
  .icon {
    flex       : 1 1 25%;
    max-width  : 25%;
  }
}

@media all and (max-width: 876px) {
  .icon {
    flex       : 1 1 33.3%;
    max-width  : 33.3%;
  }

  header {
    position         : inherit;
    width            : 100%;
  }

  .search {
    margin-top: 30px;
  }

  .title-h2 {
    margin-top: 30px;
  }
}

@media all and (max-width: 600px) {
  .icon {
    flex       : 1 1 50%;
    max-width  : 50%;
  }
}