@import url(http://fonts.googleapis.com/css?family=Roboto);
/*@import url("http://cdn.foundation5.zurb.com/foundation.css");*/
body {
  font-family: Verdana;
  font-size: 14px; }

hr {
  height: 1px; }

.generate {
  width: 20%;
  float: left; }
  .generate p {
    color: grey;
    font-size: 12px; }
  .generate img {
    width: auto; }

.images {
  width: 80%;
  float: left; }
  .images h1 {
    cursor: default;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500;
    color: #343434; }
    .images h1:hover i {
      color: lightgreen; }
  .images img:focus {
    opacity: .5; }
  .images .category {
    background: white;
    max-height: 150px;
    overflow-y: hidden;
    -webkit-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s; }
    .images .category .collapse {
      display: none; }
    .images .category.expanded {
      max-height: 900px;
      -webkit-transition: all 2s;
           -o-transition: all 2s;
              transition: all 2s; }
      .images .category.expanded .collapse {
        display: inline-block; }
      .images .category.expanded .expand {
        display: none; }
      .images .category.expanded h1 i {
        content: "\2212"; }
  .images .image {
    display: inline-block;
    position: relative; }
  .images .active {
    position: relative; }
    .images .active img {
      opacity: 0.2;
      -webkit-transition: all 0.2s;
           -o-transition: all 0.2s;
              transition: all 0.2s; }
    .images .active:after {
      position: absolute;
      left: 10px;
      top: 10px;
      content: "\2713";
      background: lightgreen;
      border-radius: 50%;
      text-align: center;
      color: white;
      width: 20px;
      height: 20px;
      opacity: 1; }

.images img, .preview img {
  height: auto !important;
  max-width: 10em;
  display: inline-block; }

input[type=submit] {
  border: none;
  background: none;
  font-size: 1.2em;
  font-weight: 400;
  cursor: pointer; }
  input[type=submit]:hover {
    color: green; }

.preview .image {
  position: relative;
  display: inline-block;
  float: left;
  clear: both; }
  .preview .image::after {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    content: "\2212";
    background: red;
    border-radius: 50%;
    text-align: center;
    color: white;
    width: 20px;
    height: 20px;
    opacity: 1; }

.category {
  width: 100%;
  float: left;
  clear: both;
  background: #333;
  padding: 10px;
  margin-bottom: 10px; }