/*! 
 * pohyb by Stepan Rysavy (@stepanrysavy) 
 * v1.0.0 from 2016-02-10 
*/

.dropzone, .dropzone * {
  box-sizing: border-box; }

.dropzone {
  position: relative; }
  .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 0.5em; }
    .dropzone .dz-preview .dz-progress {
      display: block;
      height: 15px;
      border: 1px solid #aaa; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        display: block;
        height: 100%;
        width: 0;
        background: green; }
    .dropzone .dz-preview .dz-error-message {
      color: red;
      display: none; }
    .dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
      display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      display: block; }
    .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
      position: absolute;
      display: none;
      left: 30px;
      top: 30px;
      width: 54px;
      height: 58px;
      left: 50%;
      margin-left: -27px; }

@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px); } }
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px); } }
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }
.dropzone, .dropzone * {
  box-sizing: border-box; }

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  padding: 20px 20px; }
  .dropzone.dz-clickable {
    cursor: pointer; }
    .dropzone.dz-clickable * {
      cursor: default; }
    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
      cursor: pointer; }
  .dropzone.dz-started .dz-message {
    display: none; }
  .dropzone.dz-drag-hover {
    border-style: solid; }
    .dropzone.dz-drag-hover .dz-message {
      opacity: 0.5; }
  .dropzone .dz-message {
    text-align: center;
    margin: 2em 0; }
  .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
    .dropzone .dz-preview:hover {
      z-index: 1000; }
      .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
    .dropzone .dz-preview.dz-file-preview .dz-image {
      border-radius: 20px;
      background: #999;
      background: linear-gradient(to bottom, #eee, #ddd); }
    .dropzone .dz-preview.dz-file-preview .dz-details {
      opacity: 1; }
    .dropzone .dz-preview.dz-image-preview {
      background: white; }
      .dropzone .dz-preview.dz-image-preview .dz-details {
        transition: opacity 0.2s linear; }
    .dropzone .dz-preview .dz-remove {
      font-size: 14px;
      text-align: center;
      display: block;
      cursor: pointer;
      border: none; }
      .dropzone .dz-preview .dz-remove:hover {
        text-decoration: underline; }
    .dropzone .dz-preview:hover .dz-details {
      opacity: 1; }
    .dropzone .dz-preview .dz-details {
      z-index: 20;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      font-size: 13px;
      min-width: 100%;
      max-width: 100%;
      padding: 2em 1em;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      line-height: 150%; }
      .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px; }
      .dropzone .dz-preview .dz-details .dz-filename {
        white-space: nowrap; }
        .dropzone .dz-preview .dz-details .dz-filename:hover span {
          border: 1px solid rgba(200, 200, 200, 0.8);
          background-color: rgba(255, 255, 255, 0.8); }
        .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
          overflow: hidden;
          text-overflow: ellipsis; }
          .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
            border: 1px solid transparent; }
      .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 0.4em;
        border-radius: 3px; }
    .dropzone .dz-preview:hover .dz-image img {
      -webkit-transform: scale(1.05, 1.05);
      -ms-transform: scale(1.05, 1.05);
      transform: scale(1.05, 1.05);
      -webkit-filter: blur(8px);
      filter: blur(8px); }
    .dropzone .dz-preview .dz-image {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      z-index: 10; }
      .dropzone .dz-preview .dz-image img {
        display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .dropzone .dz-preview.dz-error .dz-error-mark {
      opacity: 1;
      -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
      pointer-events: none;
      opacity: 0;
      z-index: 500;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      margin-left: -27px;
      margin-top: -27px; }
      .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px; }
    .dropzone .dz-preview.dz-processing .dz-progress {
      opacity: 1;
      transition: all 0.2s linear; }
    .dropzone .dz-preview.dz-complete .dz-progress {
      opacity: 0;
      transition: opacity 0.4s ease-in; }
    .dropzone .dz-preview:not(.dz-processing) .dz-progress {
      -webkit-animation: pulse 6s ease infinite;
      animation: pulse 6s ease infinite; }
    .dropzone .dz-preview .dz-progress {
      opacity: 1;
      z-index: 1000;
      pointer-events: none;
      position: absolute;
      height: 16px;
      left: 50%;
      top: 50%;
      margin-top: -8px;
      width: 80px;
      margin-left: -40px;
      background: rgba(255, 255, 255, 0.9);
      -webkit-transform: scale(1);
      border-radius: 8px;
      overflow: hidden; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        background: #333;
        background: linear-gradient(to bottom, #666, #444);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        transition: width 300ms ease-in-out; }
    .dropzone .dz-preview.dz-error .dz-error-message {
      display: block; }
    .dropzone .dz-preview.dz-error:hover .dz-error-message {
      opacity: 1;
      pointer-events: auto; }
    .dropzone .dz-preview .dz-error-message {
      pointer-events: none;
      z-index: 1000;
      position: absolute;
      display: block;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 8px;
      font-size: 13px;
      top: 130px;
      left: -10px;
      width: 140px;
      background: #be2626;
      background: linear-gradient(to bottom, #be2626, #a92222);
      padding: 0.5em 1.2em;
      color: white; }
      .dropzone .dz-preview .dz-error-message:after {
        content: '';
        position: absolute;
        top: -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #be2626; }

h1,
h2,
h3,
h4,
ul,
ol,
div,
p {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #fafafa;
}
html {
  font-size: 100%;
  font-family: "Helvetica Neue", Calibri, Arial, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
h2,
h1 {
  text-transform: uppercase;
  font-size: 1.2rem;
  color: rgba(0, 0, 255, 0.7);
  font-weight: 200;
}
h2:not(:last-child),
h1:not(:last-child) {
  margin-bottom: 1rem !important;
}
h3 {
  font-size: .6rem;
  color: rgba(0, 0, 255, 0.7);
  text-transform: uppercase;
  margin-bottom: .25rem;
  display: none;
}
h4 {
  font-size: .8rem;
}
p {
  font-size: .7rem;
}
.hide {
  display: none;
}
.group + .group {
  margin-top: .5rem;
}
.project {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: .5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
@media (min-width: 40rem) {
  .content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .content .preview {
    -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0;
            flex: 1 0 0;
  }
  .content .aside {
    -webkit-flex: 0 0 15rem;
        -ms-flex: 0 0 15rem;
            flex: 0 0 15rem;
  }
}
.preview {
  padding: .5rem;
}
.aside {
  padding: .5rem;
}
.comments-list ul {
  list-style: none;
}
.comments-list li:first-child ~ li h4 {
  margin-top: .5rem;
}
.comments-add {
  margin-top: 1rem;
}
.block {
  margin-bottom: 3rem;
}
@media (min-width: 40rem) {
  .layout {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .layout .block {
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
  }
  .layout .block > div {
    margin: 0 10px;
  }
}
/* GUI */
a:not(.btn) {
  color: rgba(0, 0, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: border-bottom-color 0.3s;
}
a:not(.btn):hover {
  border-bottom-color: rgba(0, 0, 255, 0.7);
}
button,
.btn {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 255, 0.7);
  background: rgba(0, 0, 255, 0.8);
  padding: .3em .8em;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: background .3s;
}
button:hover,
.btn:hover {
  background: rgba(0, 0, 255, 0.7);
}
label {
  color: rgba(0, 0, 255, 0.7);
  text-transform: uppercase;
  font-size: .7rem;
  display: block;
}
.optional label {
  color: #aaa;
}
.dropzone {
  border: 1px dotted rgba(0, 0, 255, 0.3);
  background: rgba(0, 0, 255, 0.04);
  color: rgba(0, 0, 255, 0.7);
  transition: background .3s;
}
.dropzone .dz-message {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.dropzone:hover {
  background: #fff;
}
.dz-complete {
  display: none!important;
}
.dropzone.dz-started .dz-message {
  display: block!important;
}
.input-text,
.input-input,
.input-textarea {
  border: 1px solid rgba(0, 0, 255, 0.3);
  background: rgba(0, 0, 255, 0.04);
  display: block;
  max-width: 100%;
  width: 100%;
  font-size: 1rem;
  padding: .3em;
  transition: background .3s;
}
.optional .input-text,
.optional .input-input,
.optional .input-textarea {
  border-color: #ccc;
  background: #fafafa;
}
.input-text:hover,
.input-input:hover,
.input-textarea:hover,
.input-text:focus,
.input-input:focus,
.input-textarea:focus {
  background: #fff;
}
.app-intro .gui-block:first-child,
.view-confirm-pass,
.view-message {
  margin-top: 20vh;
}
.gui-block {
  max-width: 20rem;
  margin: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 2rem;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
  background: #fff;
}
.gui-block-divider {
  max-width: 20rem;
  margin: 2rem auto;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
}
.view-message {
  text-align: center;
}
.view-message p {
  font-size: .8rem;
  color: rgba(0, 0, 0, 0.3);
}
.view-message p + p {
  margin-top: .7rem;
}
.header {
  padding: 1rem;
  text-align: center;
  margin-bottom: 2rem;
}
.headline-time {
  color: rgba(0, 0, 0, 0.3);
}
.headline-permalink {
  font-size: .8rem;
}
.content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 2rem;
}
.content .group {
  padding-bottom: 2rem;
}
.content .group + .group {
  margin-top: 0;
}
.group-layout {
  padding: 0 1rem;
}
.group-preview img,
.group-preview iframe {
  display: block;
  margin: auto;
  border: none;
  overflow: hidden;
}
.group-data,
.dropdata-meta > .group,
.dropdata-meta > h2 {
  min-width: 10rem;
  padding-top: .5rem;
  max-width: 30rem;
  margin: auto;
}
.group-title {
  text-align: center;
}
.dropdata-meta {
  padding-left: 1rem;
  padding-right: 1rem;
}
.dropdata-meta h2 {
  margin-top: 2rem;
}
.dropdata-elements > .group {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdata-submit {
  padding: 2rem 0 30vh;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 2rem;
}
.group-title-holder {
  text-align: center;
}
.group-title-holder:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.icon {
  cursor: pointer;
}
.icon:not(:first-child) {
  margin-left: .5rem;
}
a.icon {
  border: none;
  position: relative;
  top: .175em;
}
.icon svg {
  width: 1rem;
  height: 1rem;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.icon path {
  fill: rgba(0, 0, 255, 0.7);
  transition: fill .3s;
}
a.icon:hover path {
  fill: #000;
}
/*# sourceMappingURL=main.css.map */