@import "reset.css";
body {
  font-family: "Raleway", sans-serif;
  background: #000;
}

header, section, footer {
min-height: 200px;
}

h1, h2, h3, h4 {
  font-weight: 200;
}
h2 {color: #ddd;margin-bottom: 30px;}

p {
  font-size: 16px;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
}

header {
  display: flex;
  height: 30px;
  background-image: linear-gradient(to right, #111, #000);
  background:#000;
  color: #fff;
padding: 60px 30px 0 30px;
}
header .introtext {
  margin: auto;
}
footer {text-align:center;padding: 30px 0;}
footer a {color:#fff;font-size: 16px;background:#333; border-radius:3px; padding:15px 20px;text-decoration:none;}

#portfolio {
  text-align: center;
margin-top: 30px;
}
#portfolio .filters {
  margin: 20px 0;
}
#portfolio .filters button {
  border-radius: 3px;
  background: #333;
  border: 0;
  padding: 10px;
  color: #fff;
}
#portfolio .filters button.mixitup-control-active {
  background: #444;
  color: #fff;
}

.mixer-container {
  /* Target Elements
  ---------------------------------------------------------------------- */
  /* Grid Breakpoints
  ---------------------------------------------------------------------- */
  /* 2 Columns */
  /* 3 Columns */
  /* 4 Columns */
  /* 5 Columns */
}
.mixer-container .mix,
.mixer-container .gap {
  display: inline-block;
  vertical-align: top;
}
.mixer-container .mix {
  background: #000;
  /*border-top: .5rem solid currentColor;*/
  margin-bottom: 5px;
  border-radius: 2px;
  position: relative;
  color: #fff;
}
.mixer-container .mix .label {
  margin: auto;
  font-size: 20px;
  font-weight: bold;
}
.mixer-container .mix:hover {
  background-image: none;
}
.mixer-container .mix:before {
  content: "";
  display: inline-block;
  /*padding-top: 250px;*/
}
.mixer-container .mix.htmlcss {
  color: #91e6c7;
}
.mixer-container .mix.javascript {
  color: #d595aa;
}
.mixer-container .mix.design {
  color: #5ecdde;
}
.mixer-container .mix.development {
  color: #ccc;
}
.mixer-container .mix,
.mixer-container .gap {
  width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}
@media screen and (min-width: 541px) {
  .mixer-container .mix,
.mixer-container .gap {
    width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
  }
}
@media screen and (min-width: 961px) {
  .mixer-container .mix,
.mixer-container .gap {
    width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
  }
}
@media screen and (min-width: 1281px) {
  .mixer-container .mix,
.mixer-container .gap {
    width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
  }
}
.mixer-container figure {
  font-family: "Raleway", Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  /*margin: 10px 1%;*/
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
}
.mixer-container figure * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.mixer-container figure img {
  max-width: 100%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
}
.mixer-container figure figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}
.mixer-container figure h3,
.mixer-container figure p {
  line-height: 1.5em;
}
.mixer-container figure h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
.mixer-container figure p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
.mixer-container figure .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
.mixer-container figure .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
.mixer-container figure:hover img,
.mixer-container figure.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
.mixer-container figure:hover figcaption,
.mixer-container figure.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

/*# sourceMappingURL=style.css.map */