.full-width {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto; }

.default-ul {
  list-style: disc;
  margin: 20px 0;
  padding: 0 0 0 20px; }

.reset-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden; }

.clear-fix:after, .demo-list:after {
  content: "";
  clear: both;
  display: block;
  width: 100%;
  overflow: hidden; }

.no-icon {
  min-height: 0; }
  .no-icon .icon-link {
    min-height: 0;
    padding-left: 0; }
  .no-icon .icon {
    display: none; }

.hidden {
  display: none; }

/*==========  ANIMATIONS  ==========*/
@-webkit-keyframes hippyshake {
  0% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px); }
  20% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  40% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px); }
  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }
@keyframes hippyshake {
  0% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px); }
  20% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  40% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px); }
  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

/*==========  MIXINS  ==========*/
.vertical-align {
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-22%, -50%);
          transform: translate(-22%, -50%); }

h3 {
  font-size: 1.2rem; }

.demo-list .block-header {
  display: none; }

.demo-list li {
  display: none; }
  .demo-list li.active {
    display: block;
    -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s; }
  .demo-list li strong {
    display: none; }

.demo-search {
  margin: 3rem 0; }
  .demo-search .demo-search-input {
    width: 100%;
    height: 60px;
    padding: 0 1rem;
    border-radius: 3px;
    border: 2px solid #ef4d16;
    outline: none; }
    .demo-search .demo-search-input:focus {
      border-color: #323838;
      color: #4b5457; }

.tags {
  display: block; }
  .tags .tag {
    display: inline-block; }
    .tags .tag .tag-link {
      display: block;
      background: #eee;
      border-radius: 10px;
      border: 1px solid #eee;
      text-align: center;
      padding: 0.375rem;
      margin: 5px; }
      .tags .tag .tag-link:hover, .tags .tag .tag-link.active {
        background: #3e4545;
        color: #fff !important; }

.demo-list li {
  position: relative;
  text-align: center;
  padding: 0.75rem 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  color: #fff;
  -webkit-transition: background .3s ease;
  transition: background .3s ease;
  background: #323838;
  width: 48.99%;
  float: left;
  height: 300px;
  margin-right: 1%; }
  .demo-list li:hover {
    background: #ef4d16; }
  .demo-list li img {
    display: block;
    max-width: 100%;
    margin: 10px auto; }
  .demo-list li .number-sytem {
    font-size: 2rem;
    margin-top: 0px; }
  .demo-list li a {
    color: #fff;
    display: block; }
    .demo-list li a:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0rem;
      right: 0rem;
      bottom: 0;
      display: block; }
    .demo-list li a:hover {
      color: #fff; }
  @media only screen and (min-width: 60em) {
    .demo-list li {
      width: 31.99%;
      margin-right: 1%; } }
  @media only screen and (min-width: 80em) {
    .demo-list li {
      width: 23.99%;
      margin-right: 1%; } }
  .demo-list li span {
    margin-top: 1rem;
    display: block; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }