* {
  font-family: "Proxima Nova","Helvetica Neue","Helvetica","Arial",sans-serif;
  box-sizing: border-box; }

hr {
  border: none;
  height: 15em;
  margin: -1em;
  margin-top: 2em;
  margin-bottom: 2em; }

html, body {
  height: 100%; }

body {
  cursor: default !important;
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #f6f5f3; }

#top h4.custom_orders {
  position: absolute;
  bottom: -2em;
  right: 0;
  display: inline-block;
  line-height: 1.5;
  font-weight: 300 !important;
  text-align: right; }

#top h4.custom_orders b {
  font-weight: 500 !important; }

#top h4.custom_orders strong {
  font-weight: 300 !important; }

#top h4.custom_orders a {
  color: #fff;
  border-bottom: 2px solid #fff; }

strong {
  font-weight: 500; }

.strikethrough {
  position: relative; }

.strikethrough::after {
  border-bottom: 2px solid #fff;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 50%; }

.from-giphy {
  position: absolute;
  top: -4em;
  left: 3em;
  width: 10em;
  transform: rotate(-20deg); }

.lock {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.5em;
  color: #fff;
  z-index: 5;
  font-size: 1.25em;
  cursor: pointer; }

section#video,
section#video-gif {
  display: none;
  position: absolute;
  bottom: 0px;
  right: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden; }

section#video-gif {
  display: block; }

section#video-gif img {
  width: 100%; }

video {
  background-color: #fc4946; }

::selection {
  background: #fff;
  /* main color */ }

::-moz-selection {
  background: #fff;
  /* main color */ }

#top {
  opacity: 1;
  display: block;
  overflow: hidden;
  min-height: 95%; }

#top .box {
  margin: 0 auto;
  display: block; }

#top {
  overflow: hidden;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #fc4946;
  background-color: #42b4ff;
  background-color: #ff4272; }

#top.transparent {
  background-color: rgba(255, 15, 70, 0.7); }

#top #brand {
  background-image: url("/assets/logo.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  display: table;
  margin: 0 auto;
  height: 125px;
  width: 400px;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-top: 2em; }

#top #brand h2 {
  font-size: 5em;
  visibility: hidden; }

#top h1,
#top h2,
#top h3,
#top h4 {
  color: #fff;
  line-height: 1;
  text-align: center;
  margin: 0;
  font-weight: 500;
  /*text-shadow:0px 2px rgba(0,0,0,0.1);*/
  z-index: 4;
  position: relative; }

#top h1 {
  font-size: 1.75em;
  font-weight: 200;
  margin-left: 1.5em;
  margin-top: -1em; }

#top h2 {
  font-weight: 500;
  font-size: 3.25em;
  margin-bottom: 0.25em;
  text-transform: uppercase;
  font-size: 3em; }

#top h3 {
  font-size: 1.75em;
  font-weight: 200;
  line-height: 1.5;
  position: relative;
  display: table;
  margin: 0em auto;
  margin-top: 1em;
  padding-left: 4.5em;
  text-align: left; }

#top h3 a {
  border-bottom: 3px solid #fff;
  color: #fff; }

#top h3 a:hover {
  border-bottom: 2px solid transparent; }

.linethrough {
  text-decoration: line-through;
  opacity: 0.75; }

.ph-cat {
  width: 5em;
  position: absolute;
  top: -0.25em;
  left: -0.5em; }

.wrapper {
  display: table;
  margin: 0 auto;
  position: relative;
  max-width: 700px;
  width: 100%;
  margin-top: 2em; }

.wrapper {
  margin-top: 0; }

.wrapper h2,
.wrapper h2 i,
.wrapper p {
  vertical-align: middle; }

.wrapper h2 i,
.wrapper p {
  display: inline-block;
  margin: 0; }

#top .wrapper h2 {
  margin-bottom: 0.5em;
  margin-top: 0.5em; }

#top .wrapper {
  position: relative; }

#top button,
#top input,
#top select {
  background: none;
  border: 3px solid #fff;
  border-radius: 7.5px;
  font-size: 2.5em;
  padding: 0.35em;
  color: #fff;
  text-align: center;
  outline: none;
  width: 49%;
  margin: 0;
  /*text-shadow:0px 2px rgba(0,0,0,0.1);*/
  -webkit-appearance: none;
  -moz-appearance: none;
  -khtml-appearance: none;
  -ms-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  position: relative; }

#top input.completed,
#top select.completed {
  background-color: #fff;
  color: #42b4ff; }

#top input,
#top select {
  display: block; }

#top select option {
  font-size: 5em;
  color: #000; }

#top button {
  background-color: #fff;
  color: #fc4946;
  color: #42b4ff;
  color: #ff4272; }

#top button:hover {
  background: none;
  color: #fff; }

.step {
  display: none;
  position: relative;
  margin-top: 3em !important;
  margin-bottom: 3em !important; }

#step-upload {
  margin-top: 2em;
  display: block; }

#action-upload-gif {
  float: left; }

#top .info {
  margin-bottom: 0.5em; }

#upload-paste-url-box {
  float: right; }

#top #shipping-quantity {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.25em; }

#top #shipping-name {
  width: 100%;
  margin-left: 0;
  margin-right: 0; }

#top #shipping-email {
  width: 100%;
  margin-left: 0;
  margin-right: 0; }

#top #shipping-name,
#top #shipping-address-1,
#top #shipping-zip {
  margin-left: 0;
  float: left; }

#top #shipping-address-2,
#top #shipping-city {
  margin-right: 0;
  float: right; }

#top #shipping-country {
  width: 100%;
  margin: 0;
  margin-bottom: 0.25em; }

#step-overview {
  color: #fff;
  margin: 0 auto; }

#step-overview h4 {
  font-size: 1.5em;
  text-align: left; }

#step-overview p {
  margin: 1em auto;
  display: block;
  line-height: 1.5;
  font-size: 2em;
  text-align: center; }

#step-overview ul {
  margin: 0;
  padding: 0;
  margin-bottom: 1.5em; }

#step-overview li {
  font-size: 1.5em;
  display: table;
  font-weight: 200; }

#action-show-video {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1em;
  font-weight: 500;
  font-size: 0.75em;
  background-color: #fff;
  border-radius: 0.5em;
  padding: 0.7em;
  color: #fc4946;
  color: #42b4ff;
  color: #ff4272;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid #fff;
  vertical-align: middle;
  z-index: 5; }

#action-show-video:hover {
  background: none;
  color: #fff; }

#action-show-video.showing {
  background-color: #fc4946;
  border: 2px solid #fc4946;
  color: #42b4ff;
  color: #ff4272;
  border: 2px solid #42b4ff;
  border: 2px solid #ff4272;
  border: 2px solid #42b4ff;
  border: 2px solid #ff4272;
  background-color: #ff4272;
  color: #fff; }

#action-show-video.showing:hover {
  background-color: #fff;
  color: #fc4946;
  color: #42b4ff;
  color: #ff4272; }

#action-upload-gif-handler {
  display: none; }

#top select {
  cursor: text; }

#top button {
  cursor: pointer;
  margin-right: 0.125em;
  font-weight: 500;
  z-index: 5; }

#top button.action-previous {
  float: left;
  margin-left: 0;
  background: none;
  color: #fff; }

#top button.action-next {
  float: right;
  margin-right: 0; }

button,
button i {
  vertical-align: middle; }

button i {
  margin-right: 0.25em;
  margin-left: 0.25em;
  font-size: 0.75em; }

#top .alertBox a {
  border-bottom: 2px solid #ff4272;
  color: #ff4272; }

#top .alertBox {
  color: #fc4946;
  color: #ff4272;
  font-size: 2em;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.25em;
  padding: 0.5em;
  text-align: center;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  border: 2px solid #fff;
  display: none;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: middle; }

#top .alertBox i {
  vertical-align: middle; }

#top input,
#top select {
  margin-left: 0.125em; }

#step-payment .action-next {
  padding-left: 0;
  padding-right: 0; }

#step-payment input,
#step-payment select {
  margin-bottom: 0.25em; }

#step-position .wrapper,
#step-payment .wrapper {
  max-width: 600px; }

#top #cc-number {
  float: left;
  width: 100%;
  margin-left: 0;
  margin-right: 0; }

#top #cc-month {
  float: left;
  width: 32%;
  margin-left: 0; }

#top #cc-year {
  width: 32%;
  float: left;
  margin-right: 0;
  margin-left: 0.25em; }

#top #cc-cvc {
  width: 33%;
  float: right; }

#top ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff;
  opacity: 1 !important; }

#top :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
  opacity: 1 !important; }

#top ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
  opacity: 1 !important; }

#top :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
  opacity: 1 !important; }

.progressBar {
  height: 69px;
  max-width: 700px;
  margin: 0 auto;
  margin-top: 1em;
  border-radius: 0px;
  display: none;
  position: relative; }

.progressBar .complete {
  background-image: url("/assets/nyancat-tailbg.gif");
  background-size: auto 71px;
  background-repeat: repeat-x;
  width: 0%;
  border-radius: 0px;
  position: relative;
  height: 71px;
  -webkit-transition: width 1s;
  /* For Safari 3.1 to 6.0 */
  transition: width 1s; }

.progressBar .nyanCat {
  position: absolute;
  right: -80px;
  top: 0px;
  height: 68px;
  z-index: 3; }

.progressBar .cookie {
  right: 0;
  top: 1.5em;
  width: 35px;
  z-index: 2;
  position: absolute; }

#photos {
  width: 100%;
  display: block;
  background-color: #f6f7f1;
  overflow: hidden; }

#photos img {
  width: 25%;
  display: inline-block;
  background-size: cover;
  background-position: center;
  vertical-align: bottom;
  margin: 0; }

#photos .animated-gif {
  width: 25%;
  height: 199px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  vertical-align: bottom;
  margin: 0;
  background-image: url("/assets/video.gif"); }

#recentGifs {
  background-color: #fff;
  position: relative; }

#recentGifs a {
  color: #fff;
  border-bottom: 3px solid #fff; }

#recentGifs a:hover {
  border-bottom: 3px solid transparent; }

#recentGifs .gifWrapper {
  width: 25%;
  height: 25%;
  height: 175px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  float: left;
  margin: 0; }

#recentGifs .gif {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center; }

#recentGifs {
  background-color: #fff; }

#recentGifs h2 {
  font-weight: 500;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #fc4946;
  background-color: #42b4ff;
  background-color: #ff4272;
  padding: 1em;
  margin: 0; }

a {
  text-decoration: none; }

#by {
  right: 0;
  bottom: 0;
  position: fixed;
  padding: 0.5em;
  font-weight: 500;
  z-index: 40;
  vertical-align: middle;
  background-color: #fc4946;
  color: #42b4ff;
  background-color: #fff;
  color: #fc4946; }

#by:hover {
  background-color: #fc4946;
  color: #fff; }

#by img {
  border-radius: 2em;
  width: 1.5em;
  vertical-align: middle; }

#step-position {
  /*border:2px solid green;*/
  overflow: hidden; }

#step-position img {
  background-size: cover;
  position: absolute;
  z-index: 0;
  resize: both;
  cursor: move;
  width: 351px;
  /* add 1px for retina bug */ }

#step-position .flipbook {
  position: relative;
  width: 390px;
  /*border:2px solid white;*/
  margin: 0 auto;
  display: table;
  /*border:2px solid blue;*/
  margin-top: -2em;
  margin-bottom: -2em; }

#top #step-overview .wrapper h2.info,
#top #step-position .wrapper h2.info {
  margin-bottom: 0;
  margin-top: 1em; }

#step-position .flipbook .side {
  background-color: #3c4044;
  width: 40px;
  height: 205px;
  position: absolute;
  top: 72.5px;
  left: 0px;
  z-index: 2;
  /*border:2px solid yellow;*/ }

#step-position .flipbook .frame {
  display: table;
  height: 350px;
  width: 350px;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
  background-image: url("/assets/step-position-bg.png");
  background-size: cover;
  /*border:2px solid white;*/
  left: 40px; }

#step-upload {
  display: block; }

#step-position {
  display: none; }

.back-3d-right {
  background-image: url("/assets/back-3d-right.png");
  background-size: 100%;
  width: 11.5px;
  height: 217px;
  overflow: hidden;
  display: block;
  position: absolute;
  right: -11.5px;
  top: 72px;
  z-index: 9; }

.loading-indicator {
  left: 50%;
  top: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  position: absolute;
  z-index: 100;
  color: #fc4946;
  font-size: 2em;
  overflow: auto; }

.back-3d-bottom {
  background-image: url("/assets/back-3d-bottom.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 401px;
  height: 12px;
  display: block;
  position: absolute;
  left: 1px;
  bottom: 60px;
  z-index: 10; }

#step-position .frameTop,
#step-position .frameBottom {
  background-color: #fc4946;
  background-color: #42b4ff;
  background-color: #ff4272;
  position: absolute;
  height: 72.5px;
  width: 360px;
  display: none; }

#step-position .frameTop {
  cursor: move;
  display: block;
  z-index: 1;
  top: 0px; }

#step-position .frameBottom {
  cursor: move;
  display: block;
  z-index: 1;
  top: 277.5px; }

[draggable=true] {
  cursor: move; }

.action-next {
  margin: 1em auto;
  min-width: 0;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #fff;
  color: #fc4946;
  z-index: 1; }

.action-next:hover {
  background-color: #fc4946;
  color: #fff; }

.step button,
.step input,
.step select {
  display: block;
  float: none;
  margin: 0.25em auto;
  width: 100%; }

.clear {
  clear: both; }

#step-shipping select#shipping-country {
  margin-top: 0; }

.step button {
  width: 50%;
  display: inline-block;
  font-weight: 500; }

#step-shipping input {
  margin-bottom: 0.25em; }

#step-shipping button,
#step-payment button {
  font-weight: 500; }

#step-shipping input,
#step-shipping select,
#step-payment input,
#step-payment select {
  text-align: left; }

#step-payment #cc-exp-month,
#step-payment #cc-exp-year {
  width: 49.5%;
  margin: 0;
  position: absolute; }

#step-payment #cc-exp-month {
  left: 0; }

#step-payment #cc-exp-year {
  right: 0; }

#step-payment .exp {
  margin: 0 auto;
  width: 100%;
  padding: 0;
  position: relative;
  height: 5em; }

footer {
  background-color: #fc4946;
  background-color: #42b4ff;
  background-color: #ff3362;
  color: #fff;
  padding: 1em;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase; }

footer a {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid #fff; }

footer a:hover {
  border: none; }

.twitterFollowBox {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
  margin: 0.5em;
  margin-bottom: 0.5em; }

.featured {
  text-align: center;
  overflow: hidden;
  display: block;
  width: 100%;
  background-color: #f8f4f0;
  padding: 1em; }

.featured .tweet {
  max-width: 950px;
  width: 100%;
  padding: 1em; }

.featured .tweet iframe {
  width: 100% !important;
  margin: 0 !important; }

.featured .box {
  max-width: 1100px; }

.featured .box .block {
  display: block;
  margin: 0; }

.featured p {
  text-transform: uppercase;
  color: #c6c2be;
  font-weight: 500;
  font-size: 0.8em;
  margin: 1em auto;
  text-align: center; }

.featured a {
  border: none;
  display: inline-table;
  vertical-align: top;
  position: relative; }

.featured a {
  margin-top: 0; }

.featured img {
  height: 4em;
  margin: 0.5em; }

.featured div:not(.oneWrapper) {
  margin: 1em auto;
  display: table; }

@-moz-document url-prefix() {
  select {
    height: auto; } }
@media (max-width: 1000px) {
  .featured .box .block {
    display: none; } }
@media (max-width: 800px) {
  #recentGifs h2 {
    text-align: right; } }
@media (max-width: 700px) {
  section#video {
    display: block;
    position: relative;
    height: auto;
    min-height: 0; }

  #action-show-video {
    display: none; }

  #top #brand {
    width: 275px;
    height: 100px; }

  #top h1 {
    margin-top: -1.5em;
    margin-left: 2em;
    font-size: 1.25em; }

  #top button,
  #top input,
  #top select {
    min-width: 0;
    width: 49%; }

  #by {
    display: none; }

  /*#step-payment .exp {
  	height:4em;
  }*/
  #step-shipping #shipping-name {
    margin-bottom: 0.25em; }

  #photos img:nth-child(1),
  #photos img:nth-child(3) {
    display: none; }

  #recentGifs .gifWrapper:nth-child(16),
  #recentGifs .gifWrapper:nth-child(15),
  #recentGifs .gifWrapper:nth-child(14),
  #recentGifs .gifWrapper:nth-child(13),
  #recentGifs .gifWrapper:nth-child(12),
  #recentGifs .gifWrapper:nth-child(11),
  #recentGifs .gifWrapper:nth-child(10),
  #recentGifs .gifWrapper:nth-child(9) {
    display: none; }

  #step-payment .exp {
    height: auto; }

  #top button,
  #top input,
  #top select {
    margin: 0 auto;
    margin-bottom: 0.25em;
    width: 100%;
    min-width: 0;
    display: block;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }

  #photos img {
    width: 50%; }

  #photos .animated-gif {
    width: 50%; }

  section#video {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important; }

  #top h3 {
    font-size: 1.25em;
    line-height: 1.5;
    margin-top: 1em; }

  .wrapper h2 i,
  .wrapper p {
    font-size: 0.6em;
    vertical-align: middle; }

  #top #step-upload h2.info {
    font-size: 1.25em;
    line-height: 1.25;
    margin-top: 1em;
    margin-bottom: 1.25em;
    font-weight: 500; }

  #top button,
  #top input,
  #top select {
    margin: 0 auto;
    margin-bottom: 0.25em;
    width: 100%;
    min-width: 0;
    display: block;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 1.5em;
    padding: 0.5em; }

  .from-giphy {
    left: 1.5em; } }
@media (max-width: 900px) {
  #recentGifs .gifWrapper {
    width: 50%; } }
@media (max-width: 600px) {
  #photos .animated-gif {
    height: auto; }

  .from-giphy {
    display: none; }

  #recentGifs h2 {
    text-align: center; }

  #top h4.custom_orders {
    display: none; }

  .ph-cat {
    display: none; }

  #top h3 {
    padding: 0;
    text-align: center; } }
@media (max-width: 500px) {
  #top h4.custom_orders {
    text-align: center;
    width: 100%; }

  .gifWrapperBox .gifWrapper {
    display: none; }

  .gifWrapperBox .gifWrapper:nth-of-type(1),
  .gifWrapperBox .gifWrapper:nth-of-type(2),
  .gifWrapperBox .gifWrapper:nth-of-type(3),
  .gifWrapperBox .gifWrapper:nth-of-type(4),
  .gifWrapperBox .gifWrapper:nth-of-type(5),
  .gifWrapperBox .gifWrapper:nth-of-type(6) {
    display: inline-block; }

  .from-giphy {
    width: 5em;
    left: 50%;
    margin-left: -2.5em;
    top: -2em; }

  section#video {
    display: none !important; }

  #photos .animated-gif {
    width: 100%; }

  #by {
    display: block;
    position: relative;
    text-align: center;
    padding: 1em;
    font-size: 1.25em;
    background-color: #fc4946;
    color: #fff; }

  #by:hover {
    color: #fc4946;
    background-color: #fff; }

  footer {
    line-height: 1.5;
    padding: 1.5em; }

  .featured {
    padding-left: 0.25em;
    padding-right: 0.25em; }

  .featured img {
    height: 3em; }

  .featured img,
  .featured img:hover {
    margin: 0.5em;
    filter: none; }

  #recentGifs .gifWrapperBox {
    border: none; }

  #recentGifs {
    border: none; }

  #recentGifs .gif {
    border: none; }

  #photos img {
    width: 100%; }

  .twitterFollowBox {
    display: none; }

  .wrapper {
    margin-top: 1em; }

  #top .alertBox {
    font-size: 1.5em;
    cursor: pointer;
    padding-left: 2em;
    padding-right: 2em; }

  .wrapper h2 i {
    margin-top: 0; }

  #top .wrapper h2 {
    margin-top: 0;
    margin-bottom: 0.25em; }

  #recentGifs .gifWrapper {
    width: 50%;
    height: 125px; }

  #top #cta {
    margin: 0;
    width: 100%; }

  #top {
    padding-left: 1em;
    padding-right: 1em; }

  /*#step-payment .exp {
  	width:100%;
  }*/
  #step-payment #cc-exp-month,
  #step-payment #cc-exp-year {
    margin-bottom: 0.25em; }

  .progressBar {
    width: 100%; }

  #top .box {
    margin-top: 2em;
    margin-bottom: 2em; }

  .progressBar {
    margin-top: 0; }

  #step-position .flipbook {
    width: 252px; }

  #step-position .flipbook .frame {
    width: 252px;
    height: 252px;
    left: 0px; }

  #step-position .frameTop,
  #step-position .frameBottom {
    height: 51px;
    width: 252px; }

  #step-position .frameBottom {
    top: 194.25px;
    height: 60px;
    width: 280px; }

  #step-position .back-3d-bottom {
    top: 194px;
    left: 0;
    width: 260px; }

  #step-position .back-3d-right {
    width: 10px;
    height: 151px;
    left: 252px;
    top: 50px; }

  #step-position .flipbook .side {
    width: 28px;
    top: 51px;
    height: 144px; }

  #top {
    background-color: #fc4946 !important; }

  #step-position .flipbook {
    margin-bottom: -1em; } }