a {
  text-decoration: none;
  color: inherit;
}
@font-face {
  font-family: MuseoSans;
  font-weight: 100;
  src: url("../fonts/museo/MuseoSansForDell-100.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 100;
  font-style: italic;
  src: url("../fonts/museo/MuseoSansForDell-100_Italic.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 300;
  src: url("../fonts/museo/MuseoSansForDell-300.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/museo/MuseoSansForDell-300_Italic.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 500;
  src: url("../fonts/museo/MuseoSansForDell-500.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/museo/MuseoSansForDell-500_Italic.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 700;
  src: url("../fonts/museo/MuseoSansForDell-700.otf") format("opentype");
}
@font-face {
  font-family: MuseoSans;
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/museo/MuseoSansForDell-700.otf") format("opentype");
}
.hide-dev #clip {
  border: none;
}
.corner {
  opacity: 0.2;
}
.hide-dev .corner {
  opacity: 1;
}
.hide-dev .dev {
  display: none;
}
.dev.info {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #FFF;
  padding: 5px;
  margin: 0 10px 10px 0;
  font-style: normal;
  z-index: 5;
  right: 0;
  text-align: center;
}
.dev.info i {
  display: inline-block;
  margin: 0 3px 0 0;
  font-style: normal;
  font-size: 10px;
  font-family: sans-serif;
}
.hide-dev .dev.info {
  display: none;
}
.dev.circle {
  top: 40px;
  left: 40px;
  position: absolute;
  z-index: 99999;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed #FFF;
  margin: -15px 0 0 -15px;
  border-radius: 1000px;
}
.dev.circle i,
.dev.circle b {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #000;
  color: #FFF;
  padding: 1px 7px 3px;
  margin: 0;
  font: normal normal 10px sans-serif;
}
.dev.circle b {
  right: 0;
  left: auto;
  background: #FFF;
  color: #000;
  cursor: pointer;
}
a {
  text-decoration: none;
  color: inherit;
}
.footer {
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
  font-style: normal;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  z-index: 5;
  background: #444444;
  line-height: 24px;
}
.footer .inner {
  padding: 4px 12px;
}
.footer .left,
.footer .right {
  display: inline-block;
  width: 25%;
}
.footer .right {
  width: 70%;
  float: right;
  text-align: right;
}
.footer a {
  color: white;
  text-decoration: none;
}
.footer a.unlink {
  border-right: 1px solid #FFF;
  padding: 6px 16px 6px 0;
}
.footer a.social {
  display: inline-block;
}
.footer a.social:before {
  content: ' ';
  width: 30px;
  height: 30px;
  background: url(../images/icons/ui-sprite.png) -316px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  overflow: hidden;
}
.footer a.social span {
  display: none;
}
.footer .panel {
  width: 220px;
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  margin: 0 1px 34px 0;
}
.footer .panel ul li {
  margin: 0;
  padding: 10px 20px;
}
.footer .panel ul li a {
  color: #444444;
}
.footer .panel ul li a span {
  display: inline-block;
}
.footer .panel .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
a {
  text-decoration: none;
  color: inherit;
}
/* simple */
.flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
}
.flip:hover .back,
.flip.hover .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip:hover .front,
.flip.hover .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip,
.flip .front,
.flip .back {
  width: 128px;
  height: 110px;
  overflow: visible;
}
.flip-inner {
  -webkit-transition: 500ms;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 500ms;
  -moz-transition: 500ms;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 500ms;
  transform-style: preserve-3d;
  position: relative;
}
.flip .front,
.flip .back {
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 500ms;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
  -moz-transition: 500ms;
  -moz-transform-style: preserve-3d;
  -moz-transform: rotateY(0deg);
  -o-transition: 500ms;
  -o-transform-style: preserve-3d;
  -o-transform: rotateY(0deg);
  -ms-transition: 500ms;
  -ms-transform-style: preserve-3d;
  -ms-transform: rotateY(0deg);
  transition: 500ms;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  position: absolute;
  top: 0;
  left: 0;
}
.flip .front {
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  z-index: 2;
}
.flip .back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background: #333333;
}
/*
	White text fix.
	text-shadow: 0 0px 2px rgba(0,0,0,0.6);
*/
iframe {
  border: none;
}
html {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  background: #04252a url(../images/bg-hex-ui-03a.jpg) 50% 50% repeat-x;
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  font-style: normal;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: block;
}
#clip {
  /*position: fixed;
	// overflow: hidden;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:block;
	width: 100%;
	height: 100%;
	// height: 960px; // defined by javascript
	border: 5px solid red;
	box-sizing: border-box;*/

  opacity: 0;
}
#pg {
  /*user-select: none;*/

  /*box-sizing: border-box;*/

  /*width: 100%;*/

  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border: 1px solid aqua;
  display: block;
}
.cell {
  width: 138px;
  height: 120px;
  margin: 0;
  display: block;
  position: absolute;
  color: #fff;
  overflow: visible;
  box-sizing: border-box;
}
.asymmetric .cell.row-odd {
  background: none;
}
.asymmetric .cell.row-odd .theme {
  margin-left: -69px;
}
.cell.type-ignore {
  display: block;
  opacity: 0.2;
  background: red;
}
.cell.selected .cta {
  display: block;
}
.cell.type-double {
  width: 276px;
  height: 240px;
  background: none;
}
.cell .title {
  opacity: 0;
  padding: 10px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.cell .body {
  opacity: 0;
  padding: 10px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.cell .tileNo {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  color: #fff;
  padding: 5px;
  margin: 1px 5px 5px 6px;
  font-style: normal;
  font-size: 20px;
  opacity: 0.8;
}
.cell .tile-icon {
  margin: -5px;
  padding: 0;
  display: block;
  width: 138px;
  height: 160px;
}
.instagram .tile-icon {
    border-radius: 100px 100px 100px 100px;
    width: 90px;
    height: 90px;
    margin: 26px 0 0 20px;
    display: block;
    border: 3px solid rgba(0, 0, 0, 0.7);
    box-shadow: -5px -3px 6px rgba(0, 0, 0, 0.8),
        3px 3px 6px rgba(255, 255, 255, 0.15);
}
.theme {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: white;
}
.theme.none {
  color: #333;
}
.theme.none.card {
  color: #fff;
  background-color: #333;
}
.theme.none .back {
  border: 5px solid #333333;
}
.theme.none .front,
.theme.none .back {
  background-color: transparent;
}
.theme.default {
  color: transparent;
}
.theme.default.card {
  color: #fff;
  background-color: transparent;
}
.theme.default .back {
  border: 5px solid transparent;
}
.theme.default .front .cta a,
.theme.default .back .cta a {
  background: transparent;
}
.theme.red {
  color: #ce1126;
}
.theme.red.card {
  color: #fff;
  background-color: #ce1126;
}
.theme.red .back {
  border: 5px solid #ce1126;
}
.theme.red .front .cta a,
.theme.red .back .cta a {
  background: #ce1126;
}
.theme.fucia {
  color: #b7295a;
}
.theme.fucia.card {
  color: #fff;
  background-color: #b7295a;
}
.theme.fucia .back {
  border: 5px solid #b7295a;
}
.theme.fucia .front .cta a,
.theme.fucia .back .cta a {
  background: #b7295a;
}
.theme.purple {
  color: #6e2585;
}
.theme.purple.card {
  color: #fff;
  background-color: #6e2585;
}
.theme.purple .back {
  border: 5px solid #6e2585;
}
.theme.purple .front .cta a,
.theme.purple .back .cta a {
  background: #6e2585;
}
.theme.green {
  color: #7fff00;
}
.theme.green.card {
  color: #333;
  background-color: #7fff00;
}
.theme.green .back {
  border: 5px solid #7fff00;
}
.theme.green .front .cta a,
.theme.green .back .cta a {
  color: #333;
  background: #7fff00;
}
.theme.aqua {
  color: #00ffff;
}
.theme.aqua.card {
  color: #333;
  background-color: #00ffff;
}
.theme.aqua .back {
  border: 5px solid #00ffff;
}
.theme.aqua .front .cta a,
.theme.aqua .back .cta a {
  color: #333;
  background: #00ffff;
}
.theme.lime {
  color: #c1d82f;
}
.theme.lime.card {
  color: #fff;
  background-color: #c1d82f;
}
.theme.lime .back {
  border: 5px solid #c1d82f;
}
.theme.lime .front .cta a,
.theme.lime .back .cta a {
  background: #c1d82f;
}
.theme.yellow {
  color: #ffff00;
}
.theme.yellow.card {
  color: #333;
  background-color: #ffff00;
}
.theme.yellow .back {
  border: 5px solid #ffff00;
}
.theme.yellow .front .cta a,
.theme.yellow .back .cta a {
  color: #333;
  background: #ffff00;
}
.theme.orange {
  color: #dc5034;
}
.theme.orange.card {
  color: #fff;
  background-color: #dc5034;
}
.theme.orange .back {
  border: 5px solid #dc5034;
}
.theme.orange .front .cta a,
.theme.orange .back .cta a {
  background: #dc5034;
}
.theme.blue {
  color: #007fff;
}
.theme.blue.card {
  color: #fff;
  background-color: #007fff;
}
.theme.blue .back {
  border: 5px solid #007fff;
}
.theme.blue .front .cta a,
.theme.blue .back .cta a {
  background: #007fff;
}
.cta {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  text-align: center;
}
.cta em {
  font-style: normal;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 300;
}
.cta a {
  color: white;
  position: absolute;
  top: auto;
  bottom: 0;
  padding: 4px 4px;
  margin: 12px auto;
  text-align: center;
  left: 0;
  right: 0;
  width: 60px;
  border-radius: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.4);
}
.no-flip .theme .front {
  display: block;
  width: 320px;
  height: 320px;
}
.no-flip .theme .back {
  display: none;
}
.overlay {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  vertical-align: middle;
  text-align: center;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.show-overlay .overlay {
  display: table;
}
.overlay .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.card {
  width: 310px;
  height: 455px;
  border-radius: 10px;
  display: block;
  margin: 0 auto 0;
  padding: 5px 0 0 0;
  box-shadow: 0 0 32px -2px #000000;
  position: relative;
}
.card-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.card .inner {
  position: relative;
  margin: 0;
  padding: 0 40px;
  display: block;
  text-align: left;
}
.card .number {
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 20px;
  color: inherit;
  font-weight: 100;
  font-style: normal;
  margin: 7px 0 7px 40px;
  display: block;
  text-align: left;
}
.card .close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  z-index: 2;
}
.card .title {
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 22px;
  color: inherit;
  font-weight: 300;
  font-style: normal;
  display: block;
  margin: 10px 0 15px 0;
}
.card .text {
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 15px;
  color: inherit;
  font-weight: 100;
  font-style: normal;
  line-height: 1.35;
  display: block;
}
.card .link,
.card .share {
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  display: block;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.card .link {
  display: none;
  padding: 10px 0 0 0;
  text-decoration: none;
}
.show-link.card .link {
  display: block;
}
.card .share {
  position: absolute;
  bottom: 0;
  padding: 0 0 8px 30px;
  text-transform: uppercase;
}
.card .arrow {
  position: absolute;
  top: 50%;
  bottom: 0;
  width: 30px;
  height: 60px;
  z-index: 1;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  margin: 0 5px;
}
.card .arrow.next {
  right: 0;
  left: auto;
}
.card .arrow.prev {
  right: auto;
  left: 0;
}
.card .media {
  width: 310px;
  height: 175px;
  display: none;
  overflow: hidden;
}
.show-media.card .media {
  display: block;
}
.card .media iframe {
  display: block;
}
.card .media img {
  display: block;
  width: 100%;
}
.social-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  z-index: 1;
  background: white;
  margin: 0 0 45px 0;
  padding: 0 0 5px 0;
  box-shadow: 0 0px 21px 0px rgba(0, 0, 0, 0.4);
}
.social-panel .close {
  margin: 6px;
}
.social-panel ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.social-panel ul li {
  font-family: 'MuseoSans', Arial, sanserif;
  font-size: 15px;
  color: #444444;
  font-weight: 300;
  font-style: normal;
  display: block;
  text-align: left;
  margin: 0 40px;
  padding: 10px 0;
}
.social-panel ul li + li {
  border-top: 1px solid #DDD;
}
.icon {
  cursor: pointer;
  background: url(../images/icons/ui-sprite.png) 50% 50% no-repeat;
}
.ui-light .icon.arrow.next {
  background-position: -445px 55%;
}
.ui-dark .icon.arrow.next,
.icon.arrow.next {
  background-position: -392px 55%;
}
.ui-light .icon.arrow.prev {
  background-position: -173px 55%;
}
.ui-dark .icon.arrow.prev,
.icon.arrow.prev {
  background-position: -121px 55%;
}
.icon.close {
  width: 30px;
  height: 30px;
}
.ui-light .icon.close {
  background-position: -231px 50%;
}
.ui-dark .icon.close,
.icon.close {
  background-position: -560px 50%;
}
.icon.social {
  background: none;
  display: block;
}
.icon.social.twitter:before,
.icon.social.linkedin:before,
.icon.social.facebook:before {
  background: url('../images/icons/social_sprite@2x.png') 50% 50% no-repeat;
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background-size: 28px;
  overflow: hidden;
  padding: 0 10px 0 0;
}
.icon.social.linkedin:before {
  background-position: 50% -38px;
}
.icon.social.twitter:before {
  background-position: 50% -5px;
}
.icon.social.facebook:before {
  background-position: 50% -70px;
}
.icon.social span {
  display: inline-block;
  vertical-align: middle;
}
.card .icon.share {
  background: none;
}
.card .icon.share:before {
  content: ' ';
  width: 30px;
  height: 30px;
  background: url(../images/icons/ui-sprite.png) -646px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  overflow: hidden;
}
.ui-light.card .icon.share:before {
  background-position: -317px 50%;
}
.cell.alpha-key {
  opacity: 0.5!important;
}
.fadein #clip {
  -webkit-animation: fadein 650ms;
  /* Safari 4+ */

  -moz-animation: fadein 650ms;
  /* Fx 5+ */

  -o-animation: fadein 650ms;
  /* Opera 12+ */

  animation: fadein 650ms;
  /* IE 10+, Fx 29+ */

  opacity: 1;
  display: block;
}
.fadein #overlay {
  -webkit-animation: fadeout 650ms;
  /* Safari 4+ */

  -moz-animation: fadeout 650ms;
  /* Fx 5+ */

  -o-animation: fadeout 650ms;
  /* Opera 12+ */

  animation: fadeout 650ms;
  /* IE 10+, Fx 29+ */

  opacity: 0;
  display: none;
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}