@charset "UTF-8";

.creations-container .loader {
  text-align: center;
  padding: 5rem 0;
  font-size: 35px;
  color: #A9A9A9;
}

.creation-header .image {
  width: 100%;
  height: 250px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.creation-header .image:before {
  background: none;
  background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(19%, rgba(0, 0, 0, 0.738)), color-stop(34%, rgba(0, 0, 0, 0.541)), color-stop(47%, rgba(0, 0, 0, 0.382)), color-stop(56.5%, rgba(0, 0, 0, 0.278)), color-stop(65%, rgba(0, 0, 0, 0.194)), color-stop(73%, rgba(0, 0, 0, 0.126)), color-stop(80.2%, rgba(0, 0, 0, 0.075)), color-stop(86.1%, rgba(0, 0, 0, 0.042)), color-stop(91%, rgba(0, 0, 0, 0.021)), color-stop(95.2%, rgba(0, 0, 0, 0.008)), color-stop(98.2%, rgba(0, 0, 0, 0.002)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#a6000000',GradientType=0);
  content: "";
  position: absolute;
  z-index: 3;
  height: 80%;
  opacity: 0.6;
  left: 0;
  top: 20%;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.creation-header .image .infos {
  position: absolute;
  margin: 0;
  left: 20px;
  bottom: 15px;
  color: #fff;
  z-index: 4;
  width: calc(100% - 40px);
}

.creation-header .infos a:hover {
  text-decoration: none;
}

.creation-header .infos p {
  color: #000;
}

.creation-header .infos > h1,
.creation-header .infos > p {
  display: inline;
}

.creation-header .image h1 {
  margin: 0;
  margin-bottom: 8px;
  color: #fff;
  word-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.creation-header .image p {
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.creation .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.creation .tags .tag {
  display: block;
  margin-right: 10px;
}

.creations-tabs {
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}

.creations-tabs > li.active > a,
.creations-tabs > li.active > a:focus,
.creations-tabs > li.active > a:hover {
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border: 0;
}

.creations-tabs a {
  font-size: 18px;
  font-family: "Roboto Mono";
  font-weight: 700;
  text-transform: uppercase;
  padding: .8rem 1rem;
  display: block;
}

.creations-tabs a:hover {
  background: #ddd;
  text-decoration: none;
}

.filters {
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  padding: 1.5rem 1rem 1rem;
  border-radius: 2px;
  position: relative;
  z-index: 1;
}

.creation .tags .tag,
.filters label {
  background: none;
  color: #4d545d;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.creation .tags .tag:hover {
  text-decoration: none;
}

.feedback .social a {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
}

.filters .tag-extra {
  display: none;
}

.image-watermark {
  width: 100%;
  margin-top: -20%;
  padding: 0;
  -webkit-clip-path: polygon(0% 20%, 100% 20%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 20%, 100% 20%, 100% 100%, 0% 100%);
}

.screenshot-container {
  width: 25%;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 0;
  margin: 0 5px;
  background: #fff;
}

@media (max-width: 767px) {
  .creation-header .social a {
    font-size: 14px;
  }

  .filters {
    padding: 10px 20px 0px 20px;
    /* compensate checkbox last child padding */
  }

  .filters label {
    font-size: 14px;
    white-space: nowrap;
  }

  .filters > div > div > div:last-child {
    padding-bottom: 20px;
  }

  .screenshot-container {
    width: 100%;
  }
}

.creations-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 780px) {
  .creations-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .checkbox-filter {
    margin-left: 0 !important;
  }
}

.checkbox-filter {
  margin-left: 40px;
  padding: 0 10px;
  height: 55px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  bottom: -3px;
  /* Base for label styling */
  /* checkbox aspect */
  /* checked mark aspect */
  /* checked mark aspect changes */
  /* disabled checkbox */
}

.checkbox-filter input[type="checkbox"]:not(:checked),
.checkbox-filter input[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

.checkbox-filter input[type="checkbox"]:not(:checked) + label,
.checkbox-filter input[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

.checkbox-filter input[type="checkbox"]:not(:checked) + label:before,
.checkbox-filter input[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid #cf8e44;
  background: transparent;
  -webkit-transition: all .2s;
  transition: all .2s;
  /*box-shadow: inset 0 1px 3px rgba(0,0,0,.1);*/
}

.checkbox-filter input[type="checkbox"]:not(:checked) + label:before,
.checkbox-filter input[type="checkbox"]:checked + label:before {
  border-radius: 2px;
}

.checkbox-filter input[type="checkbox"]:not(:checked) + label:after,
.checkbox-filter input[type="checkbox"]:checked + label:after {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 1.3em;
  line-height: 0.8;
  color: #cf8e44;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.checkbox-filter input[type="checkbox"]:not(:checked) + label:after,
.checkbox-filter input[type="checkbox"]:checked + label:after {
  content: '\2714';
}

.checkbox-filter input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.checkbox-filter input[type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.checkbox-filter input[type="checkbox"]:disabled:not(:checked) + label:before,
.checkbox-filter input[type="checkbox"]:disabled:checked + label:before {
  -webkit-box-shadow: none;
          box-shadow: none;
  /*border-color: #cf8e44;
	  background-color: #ddd;*/
}