@patternslib/patternslib/src/pat/slides/style/slides.css

Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la

@import url("fontello/css/fontello.css");

@import url("animate.css/animate.css");

@import url(http://fonts.googleapis.com/css?family=Just+Another+Hand);

/* @group Custom animations for this slideshow only */

/* @group Single pearl */

@keyframes drop-80 {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 80px;
  }
}

.slide.active #single-pearl,
.pat-slides.mode-list #single-pearl {
  animation: shake 1s 2.5s, drop-80 linear 0.3s 3.6s;
  animation-fill-mode: forwards;
}

/* @end */

/* @end */

@font-face {
  font-family: "Frutiger 55 Roman";
  src: url("fonts/frutiger-roman/frutigerltstd-roman-webfont.eot");
  src: local("FrutigerLTStdRoman"),
    url("fonts/frutiger-roman/frutigerltstd-roman-webfont.woff") format("woff"),
    url("fonts/frutiger-roman/frutigerltstd-roman-webfont.ttf")
      format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "f65b";
  src: url("fonts/frutiger-bold/f65b.eot");
  src: local("FrutigerLTStdBold"),
    url("fonts/frutiger-bold/f65b.woff") format("woff"),
    url("fonts/frutiger-bold/f65b.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "flc";
  src: url("fonts/frutiger-light-condensed/frutigerltstd-lightcn-webfont.eot");
  src: local("FrutigerLTStdLightCn"),
    url("fonts/frutiger-light-condensed/frutigerltstd-lightcn-webfont.woff")
      format("woff"),
    url("fonts/frutiger-light-condensed/frutigerltstd-lightcn-webfont.ttf")
      format("truetype");
  font-weight: lighter;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: "pbi";
  src: url("fonts/perpetua/Perpetua Bold Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font: 16px/1.8 Verdana, "Lucida Grande", Lucida, sans-serif;
}

body.slideshow-running:before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  z-index: 2147483646;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

.pat-slides.mode-full .slide:not(.active) .animated {
  display: none;
}

figcaption.customised {
  position: absolute;
  top: 0;
  left: 0;
  width: 1024px;
  text-align: center;
  display: block;
  font: 110px/640px Dakota !important;
  color: #819da5;
  background-color: rgba(254, 254, 254, 0.8);
}

/* @group Slideshow */

.pat-slides {
  counter-reset: paging;
  z-index: 10000;
}

.pat-slides.mode-full {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin: -320px 0 0 -512px;
  width: 1024px;
  height: 640px;
  background: #000;
  z-index: 2147483647;
}

/* @end */

/* @group Postit */

.postit {
  position: relative;
  padding: 1em;
  margin: 0 10px 40px;
  background-color: #fdfdc8;
  color: #6f5a44;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  display: block;
  border: 1px solid #e2e2e2;
}

.postit.usp {
  background-color: #f8f7f4;
  padding: 22px 22px 35px;
  border: 5px double #e3e1da;
  font: 13px/24px Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  text-shadow: white 0 1px 0;
  box-sizing: border-box;
  margin-right: 0;
  margin-left: 0;
}

.postit.usp .downloads:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "\e809";
  display: block;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-bottom: 8px;
  margin-top: 5px;
}

.postit.usp.float-before {
  margin-left: 0;
  margin-right: 30px;
  float: left;
}

.postit.usp h3 {
  letter-spacing: 1px;
  margin-bottom: 16px;
  font: italic normal 18px/28px Georgia, "Times New Roman", Times, serif;
  text-transform: none;
  text-align: center;
}

.postit ul {
  padding-left: 17px;
  list-style-type: none;
}

.postit ol {
  padding-left: 22px;
}

.postit ul li {
  margin-bottom: 8px;
}

.postit ul li:before {
  content: "☛";
  content: "❧";
  content: "✽";
  content: "❖";
  width: 17px;
  margin-left: -17px;
  float: left;
  font-size: 13px;
}

.postit.pat-collapsible .panel-content {
  padding-bottom: 0;
}

.postit *:last-child {
  margin-bottom: 0;
}

.postit *:last-child:after {
  content: " ";
  clear: both;
  display: block;
}

.postit a,
aside.sidebar .postit a {
  color: #59676e;
  font-weight: bold;
}

.postit:before,
.postit:after {
  content: "";
  position: absolute;
  z-index: -2;
}

.postit.guide {
  display: none;
}

.postit img.inline {
  height: 1em;
  vertical-align: text-bottom;
}

/* Lifted corners */

.lifted {
  /*border-radius:4px;*/
}

.lifted:before,
.lifted:after {
  bottom: 12px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.lifted:after {
  right: 10px;
  left: auto;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}

/* Curled corners */

.curled {
  border: 1px solid #efefef;
  -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
  border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

.curled:before,
.curled:after {
  bottom: 12px;
  left: 10px;
  width: 50%;
  height: 55%;
  max-width: 200px;
  -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  -webkit-transform: skew(-8deg) rotate(-3deg);
  -moz-transform: skew(-8deg) rotate(-3deg);
  -ms-transform: skew(-8deg) rotate(-3deg);
  -o-transform: skew(-8deg) rotate(-3deg);
  transform: skew(-8deg) rotate(-3deg);
}

.curled:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

/* Perspective */

.perspective:before {
  left: 80px;
  bottom: 5px;
  width: 50%;
  height: 35%;
  max-width: 200px;
  -webkit-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
  box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
  -webkit-transform: skew(50deg);
  -moz-transform: skew(50deg);
  -ms-transform: skew(50deg);
  -o-transform: skew(50deg);
  transform: skew(50deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.perspective:after {
  display: none;
}

/* Raised shadow - no pseudo-elements needed */

.raised {
  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
    0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
    0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 0, 0, 0.1) inset;
}

/* Curved shadows */

.curved:before {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 50%;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  -moz-border-radius: 10px / 100px;
  border-radius: 10px / 100px;
}

.curved-vt-2:before {
  right: 0;
}

.curved-hz-1:before {
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

.curved-hz-2:before {
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

/* @end */

/* @group Introduction block */

#intro {
  padding: 50px 50px 70px;
  font-size: 14px;
  margin: 40px 10% 50px;
}

.pat-slides.mode-full #intro {
  display: none;
}

/* @end */

/* @group Icon */

.icon {
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  text-indent: -1000px;
}

.icon:before {
  width: 70px;
  height: 70px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 0;
  line-height: 71px;
  margin-left: 0;
  font-size: 40px;
}

/* @end */

/* @group Office building floors */

.office-building-floors {
}

.office-building-floors img {
  margin-bottom: 15px;
  margin-top: 0;
  display: block;
  width: 100%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

/* @end */

/* @group Animations */

/* @group Persona portrait */

.persona-portrait {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.persona-portrait.round {
  border-radius: 50%;
}

.persona-portrait img {
  max-width: 20000px !important;
}

.persona-portrait.uwv img {
  margin-top: -330px;
  width: 750px;
  margin-left: -67px;
}

/* @end */

/* @group Shrink 50 */

@keyframes shrink-60 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.5);
  }
}

/* @end */

/* @group Spin ccs */

@keyframes spin-ccw {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-359deg);
  }
}

.active .spin-ccw {
  animation: spin-ccw 2s infinite linear;
}

/* @end */

/* @end */

/* @group Shrink 60 down  */

.active .shrink-60-down,
.pat-slides.mode-list .shrink-60-down {
  animation: shrink-60 2s;
  transform-origin-y: middle;
  transform-origin-x: center;
  -webkit-animation-fill-mode: forwards;
}

@media print {
  .active .shrink-60-down,
  .pat-slides.mode-list .shrink-60-down,
  .shrink-60-down {
    animation: none;
    transform: scale(0.5);
  }
}

/* @end */

/* @group Data source */

div[data-src] {
  position: relative;
}

.pat-slides.mode-list div[data-src]:hover:after {
  background-color: #efefef;
  content: attr(data-src);
  position: absolute;
  padding-right: 10px;
  font-size: 10px;
  padding-left: 10px;
  border: 1px solid #dfbf94;
  color: #72624c;
  top: 3px;
  right: 0;
  border-radius: 20px;
  line-height: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: rgba(254, 255, 255, 0.72) 0 1px 0;
  z-index: 1000;
}

.pat-slides.mode-list .slide section div[data-src]:hover:after {
  zoom: 2;
}

/* @end */
/* @group Office buidling */

.office-building {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 1024px;
  height: 640px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
}

.office-building img {
  max-height: 640px !important;
  max-width: 1024px !important;
}

#how-to-roll-out-touchpoints-efficiently.active .office-building,
.pat-slides.mode-list
  #how-to-roll-out-touchpoints-efficiently
  .office-building {
  width: 583px;
  left: -180px;
  transition: width 1.5s, left 1.5s;
  transition-delay: 4s;
}

/* @end */

/* @group Slider */

@keyframes slider-88 {
  0% {
    transform: translate(0%);
    opacity: 1;
  }
  100% {
    transform: translate(-88%);
    opacity: 1;
  }
}

.pat-slides.mode-full .slide.active section .slide-by img {
  animation: slider-88 25s;
  animation-fill-mode: forwards;
}

/* @end */

/* @group Fan */

.fan img {
  position: absolute;
  left: 50%;
  bottom: 70px;
}

.slide section .fan img,
.slide.clean section .fan img {
  max-height: 65%;
  transform-origin: bottom left;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: rotate(-90deg);
  transition: transform 1s;
}

.slide.active section .fan img:nth-child(1) {
  transform: rotate(-80deg);
  transition-delay: 1s;
}

.slide.active section .fan img:nth-child(2) {
  transform: rotate(-60deg);
  transition-delay: 0.8s;
}

.slide.active section .fan img:nth-child(3) {
  transform: rotate(-40deg);
  transition-delay: 0.6s;
}

.slide.active section .fan img:nth-child(4) {
  transform: rotate(-20deg);
  transition-delay: 0.4s;
}

.slide.active section .fan img:nth-child(5) {
  transform: rotate(0deg);
  transition-delay: 0.2s;
}

/* @end */

/* @group Floats */

.float-after {
  float: right;
}

.float-before {
  float: left;
}

/* @end */

/* @group Back to top */

#back-to-top {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.23);
  width: 25px;
  height: 25px;
  overflow: hidden;
  text-indent: -1000px;
  right: 0;
  opacity: 0;
  transition: all 1s;
  bottom: 90%;
}

.pat-slides.mode-full #back-to-top {
  display: none;
}

#back-to-top:hover {
  background-color: rgba(0, 0, 0, 0.47);
}

#back-to-top:before {
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 0;
  content: "⇧";
  font-size: 18px;
  text-align: center;
  line-height: 27px;
  display: block;
  float: left;
  width: 25px;
  height: 25px;
  color: white;
}

#back-to-top.bumped {
  opacity: 1;
  position: fixed;
  bottom: 5%;
}

/* @end */

/* @group Anchor */

a {
  color: #819da5;
}

a:hover {
  color: #506166;
}

a.pat-markdown {
  color: gray;
  text-decoration: none;
  cursor: default;
}

/* @end */

/* @group Tab cloud */

ul.tabCloud {
  list-style-image: none;
  padding: 0 0 22px;
  border-bottom: 1px solid #dadada;
  font: 14px/30px "Dakota";
  margin: 0;
}

ul.tabCloud li {
  list-style-image: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

ul.tabCloud li a {
  list-style-image: none;
  margin: 0;
  padding: 0 30px 0 0;
  display: inline-block;
  text-decoration: none;
}

ul.tabCloud li a:hover {
  text-decoration: underline;
}

ul.tabCloud li.current a {
  list-style-image: none;
  margin: 0;
  padding: 0 30px 0 0;
  display: inline-block;
  text-decoration: none;
  color: black;
  cursor: default;
}

/* @end */

/* @group Skip to global navigation */

#skip-2-nav {
  width: 974px;
  display: block;
  height: 90px;
}

/* @end */

/* @group Auto scale */

.pat-auto-scale {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  opacity: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.pat-auto-scale.scaled {
  opacity: 1;
}

/* @end */

/* @group Page header */

#page-header {
  width: 100%;
  display: block;
  overflow: hidden;
  float: left;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.pat-slides.mode-full #page-header {
  display: none;
}

/* @end */

/* @group Global navigation */

#globalNavigation {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 65px;
  height: 82px;
  font-size: 13px;
  line-height: 19px;
  background: #f6f6f6 url(brandmark-gray.svg) no-repeat 947px 44px;
  border-bottom: 1px solid silver;
  width: 975px;
}

#globalNavigation li {
  display: inline-block;
  position: relative;
}

#globalNavigation li:before {
  content: "IPE";
  border-right: 1px solid silver;
  float: right;
  height: 0;
  width: 1px;
  overflow: hidden;
  padding-top: 25px;
  position: absolute;
  top: 47px;
  right: -3px;
}

#globalNavigation li:last-child:before {
  display: none;
}

#globalNavigation li.active,
#globalNavigation li.home.active.current {
  background: white url(images/globalNavigation-current.png) no-repeat center 0;
}

#globalNavigation li.active a,
#globalNavigation li.active a:hover {
  color: black;
}

#globalNavigation li a {
  display: inline-block;
  text-transform: lowercase;
  text-decoration: none;
  margin-right: 15px;
  margin-left: 15px;
  color: #939598;
  letter-spacing: 2px;
  padding: 48px 0 0;
  margin-bottom: 14px;
}

#globalNavigation li a:hover {
  text-decoration: none;
  border-bottom: 1px solid #707070;
  color: #707070;
}

#globalNavigation li.home {
  margin-right: 40px;
  margin-left: 0;
  overflow: hidden;
  float: left;
  padding-bottom: 20px;
  width: auto;
}

#globalNavigation li.home.active {
  background-image: none;
  background-color: transparent;
}

#globalNavigation li.home:before {
  display: none;
}

#globalNavigation li.home a {
  text-indent: -1000px;
  display: block;
  margin: 0;
  padding-right: 0;
  padding-left: 0;
  width: auto;
  height: 18px;
  overflow: hidden;
  color: rgba(246, 246, 246, 0);
  font-size: 13px;
  padding-top: 49px;
}

#globalNavigation li.home a:before {
  content: "Patterns";
  display: block;
  text-indent: 0;
  top: 0;
  left: 0;
  z-index: 4;
  color: black;
  font-family: "f65b";
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 18px;
}

/* @end */

/* @group Home */

#home-link {
  position: fixed;
  top: 0;
  right: 50px;
  background: #eef8fc url(brandmark-gray.svg) no-repeat 10px 20px;
  width: 42px;
  height: 56px;
  text-indent: -1000px;
  overflow: hidden;
  zoom: 1.5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  zoom: 0.75;
}

.pat-slides.mode-full #home-link {
  display: none;
}

/* @end */

/* @group Figure */

figure {
  margin: 0;
  padding: 0;
}

/* @end */

/* @group Tables */

table {
  text-align: left;
}

table tbody th {
  text-align: left;
  padding: 10px 15px;
}

table thead th {
  color: #666;
}

table td {
  padding: 10px 15px;
  vertical-align: top;
}

/* @end */

/* @group Logo cloud */

.logo-cloud {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  width: 70%;
  display: inline-block;
  text-align: center;
}

.slide .logo-cloud a {
  text-decoration: none;
  display: inline-block;
  border-bottom-style: none;
  padding: 25px;
}

.slide .logo-cloud a:hover {
  background-color: #eaeaea;
  border-radius: 10px;
}

.logo-cloud a img {
  height: 80px;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

/* @end */

/* @group Horizontal rule */

hr {
  background-color: silver;
  height: 1px;
  border-style: none;
  width: 70%;
  margin-top: 2em;
  margin-bottom: 2em;
}

/* @end */

/* @group Slide footer */

/*.slide > footer {
	position: absolute;
	bottom: 36px;
	right: 60px;
	text-align: right;
	color: gray;
	font-size: 10px;
	border-top-style: solid;
	border-top-width: 1px;
	padding-top: 5px;
	max-width: 850px;
	line-height: 14px;
}*/

.slide > footer *:last-child {
  margin-bottom: 0;
}

/* @end */

/* @group Images */

img.shadowed,
figure.shadowed {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  outline: solid 1px rgba(0, 0, 0, 0.1);
}

.slide section img {
  /*max-height: 440px;*/
  max-width: 900px;
}

.slide section figcaption {
  color: gray;
  font: italic 16px Georgia, "Times New Roman", Times, serif;
}

.slide section table img {
  max-width: 100%;
}

/* @end */

/* @group Slide */

.pat-slides .slide-content {
  font: 22px/1.8 Verdana, "Lucida Grande", Lucida, sans-serif;
  /*-webkit-transition: -webkit-transform 1s;
	transition: transform 1s;*/
  text-rendering: optimizeLegibility;
}

.pat-slides.mode-full .slide-content {
  overflow: hidden;
}

.pat-slides.mode-full .slide.draft .slide-content:after {
  content: url(images/draft.png);
  position: absolute;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  opacity: 0.66;
}

.slide:after {
  counter-increment: paging;
  content: counter(paging, decimal-leading-zero);
}
.slide .slide-content section {
  padding: 40px 60px 0;
  width: 904px;
  height: 600px;
  background: #fff;
  color: #000;
}

.slide > footer {
  display: none;
}

/* @end */

/* @group Slide header */

.slide header,
.slide .slide-content > section > h1,
.slide .slide-content > section > hgroup {
  color: #666;
  height: 50px;
  border-bottom: 1px solid silver;
  margin-bottom: 20px;
  margin-top: 30px;
  font: normal 40px/1.13 flc;
}

/* @end */

/* @group Typography */
.slide a {
  border-bottom: 0.1em solid;
  color: #0174a7;
  text-decoration: none;
}
.slide a[target="_blank"] {
  margin-right: 22px;
}
.slide a[target="_blank"]:after {
  position: absolute;
  margin-left: 7px;
  font-family: "Target Blank";
  content: "\005E";
}
.slide b,
.slide strong {
  font-weight: bold;
}
.slide i,
.slide em {
  font-style: italic;
}
.slide kbd,
.slide code {
  padding: 3px 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #fafaa2;
  color: #000;
  -webkit-tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: "PT Mono", monospace;
}

/* @end */

/* @group Block quotes */

.slide blockquote {
  font-style: italic;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: gray;
  text-align: center;
}

.slide blockquote em:last-child {
  text-align: right;
  float: right;
  margin-top: 20px;
  font: normal normal 16px "Frutiger 55 Roman";
}
.slide blockquote:before {
  position: absolute;
  color: #ebebeb;
  content: "\201C";
  margin: -15px 0 0 -20px;
  z-index: -1;
  line-height: 0.9;
  font-size: 200px;
}

.pat-slides.mode-list footer blockquote {
  text-align: left;
  margin-left: 20px;
  margin-right: 40px;
}

.pat-slides.mode-list footer blockquote:before {
  color: #eaeaea;
  margin-left: -40px;
}

/* @end */

/* @group Lists */

.slide ol,
.slide ul {
  counter-reset: list;
  margin: 0 0 45px 45px;
  list-style-type: none;
  padding: 0;
}
.slide ul ul,
.slide ol ul,
.slide ol ol,
.slide ul ol {
  margin: 0 0 0 43px;
}
.slide ol > li:before,
.slide ul > li:before {
  position: absolute;
  margin-left: -45px;
  width: 45px;
  color: #bbb;
  text-align: left;
  float: left;
}
.slide ul > li:before {
  content: "—";
}
.slide ol > li:before {
  counter-increment: list;
  content: counter(list) ".";
}

/* @end */

/* @group Code in slides */

.slide pre {
  margin: 0 0 45px;
  counter-reset: code;
  white-space: normal;
}
.slide pre code {
  display: block;
  padding: 0;
  background: none;
  white-space: pre;
}
.slide pre code:before {
  position: absolute;
  margin: 0 0 0 -120px;
  width: 110px;
  color: #bbb;
  text-align: right;
  counter-increment: code;
  content: counter(code, decimal-leading-zero) ".";
}
.slide pre mark {
  padding: 3px 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #fafaa2;
  color: #000;
  font-style: normal;
}
.slide pre .important {
  background: #c00;
  color: #fff;
  font-weight: normal;
}
.slide pre .comment {
  padding: 0;
  background: none;
  color: #888;
}

/* @end */

/* @group Headers */

h2 {
  color: black;
  margin-top: 0;
  letter-spacing: 1px;
  margin-bottom: 0.5em;
  font: bold 1.2em "flc";
}

h3 {
  text-transform: uppercase;
  font-size: 1em;
  margin-bottom: 1em;
  letter-spacing: 2px;
  font-weight: normal;
  font-style: normal;
  margin-top: 0;
}

/* @end */

/* @group Logo */

.slide .slide-content section:before {
  content: "Patterns";
  position: absolute;
  top: 30px;
  left: 60px;
  color: gray;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 1px;
  font: 13px/17px pbi;
}

.slide[dir="rtl"] .slide-content section:before {
  left: auto;
  right: 60px;
}

.slide.no-logo .slide-content section:before,
.slide.no-brandmark .slide-content section:after {
  display: none;
}

.slide .slide-content section:after {
  top: -102px;
  content: url(images/brandmark.png);
  position: absolute;
  right: 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
  transform: scale(0.3);
  box-shadow: 0 0 30px 10px white;
  border: 2px solid white;
  height: 274px;
  overflow: hidden;
  z-index: 1;
}

.slide[dir="rtl"] .slide-content section:after {
  left: 0;
  right: auto;
}

/* @end */

/* @group Markdown pattern */

a.pat-markdown {
  color: gray;
  text-decoration: none;
  /*cursor: default;*/
}

/* @end */

/* @group Slide templates */

/* @group Split screen */

.slide.split-screen section header,
.slide.split-screen .slide-content > section > h1 {
  border-style: none;
  text-indent: -1000px;
  display: none;
}

.slide.split-screen h3 {
  text-align: center;
  text-transform: none;
  font: 38px/10px flc;
  padding-top: 20px;
  margin-bottom: 20px;
}

.slide.split-screen .left-half,
.slide.split-screen .right-half {
  position: absolute;
  top: 0;
  height: 520px;
  width: 392px;
  padding: 60px;
}

.slide.split-screen .left-half {
  left: 0;
  background: #585a5e;
  color: white;
}

.slide.split-screen .right-half {
  right: 0;
}

/* @end */

/* @group Title */

.slide.title section header,
.slide.title .slide-content > section > h1 {
  border-style: none;
  text-align: center;
  position: absolute;
  top: 50%;
  margin: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 70px;
  width: 880px;
}

.slide.title:target section header,
.slide.title:target .slide-content > section > h1 {
  -webkit-animation: fadeIn 1s;
}

/* @end */

/* @group Video */

.slide.video .slide-content > section {
  background: black;
}

.slide.video video,
.slide.video object,
.slide.video .video-js {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  width: 100%;
  height: 100%;
}

@media all and (max-width: 960px) {
  /*.slide.video video {
	position: absolute;
	width: 512px;
	height: 320px;
	top: 50%;
	left: 50%;
	margin-top: -160px;
	margin-left: -256px;
}*/
}

.pat-slides.mode-full .slide.video {
  z-index: 1;
}

.slide.video section:before,
.slide.video:after {
  display: none;
}

/* @end */

/* @group Full quote */

.slide.pat-slides.mode-full-quote section h2 {
  color: white;
}

.slide.pat-slides.mode-full-quote section header,
.slide.pat-slides.mode-full-quote .slide-content > section > h1 {
  border-style: none;
}

.slide.pat-slides.mode-full-quote section blockquote {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}

/* @end */

/* @group Clean */

.slide.clean .slide-content section {
  padding: 0;
  width: 1024px;
  height: 640px;
}

.slide.clean section header,
.slide.clean .slide-content > section > h1 {
  border-style: none;
  text-indent: -1000px;
  display: none;
}

.slide.clean section header h2:before,
.slide.clean section header,
.slide.clean .slide-content > section > h1:before {
  text-indent: 0;
}

.slide.clean section img {
  max-width: 100%;
  max-height: 100%;
}

/* @end */

/* @group Full media */

.slide.media-full-height section {
}

.slide.media-full-height section header,
.slide.media-full-height .slide-content > section > h1 {
  display: none;
}

.slide.media-full-height section img {
  max-width: 10000px !important;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  height: 100%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
}

/* @end */

/* @group Full */

.slide.full section {
}

#plato {
  position: absolute;
  top: 215px;
  left: 593px;
  width: 145px;
  text-align: center;
  font: 19px/22px "Just Another Hand";
}

#socrates {
  position: absolute;
  top: 281px;
  left: 381px;
  font: 19px/21px "Just Another Hand";
  width: 110px;
  text-align: center;
}

.slide.full section header,
.slide.full .slide-content > section > h1,
.slide.full .slide-content > section > hgroup {
  min-height: 300px;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  border-style: none;
  padding-left: 60px;
  height: auto;
  padding-bottom: 200px;
  background-image: linear-gradient(
    bottom,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  padding-top: 69px;
  position: absolute;
  text-shadow: black 0 1px 5px 10px;
}

@media print {
  .slide.full section header,
  .slide.full .slide-content > section > header {
    background: url(images/chrome-gradient-fix.png) repeat-x 0 0;
  }
}

.slide.full section .text-overlay {
  position: absolute;
  width: 910px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 180px;
  padding-left: 60px;
  padding-right: 60px;
  color: gray;
  text-shadow: white 0 0 55px;
}

.slide.full .slide-content > section > h1,
.slide.full .slide-content > section > hgroup > h1 {
  color: white;
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 40px;
}

.slide.full .slide-content > section > hgroup h2 {
  font-size: 18px;
  letter-spacing: 1px;
  color: white;
}

.slide.full section:before {
  display: none;
}

.slide.full section > img {
  max-width: 100% !important;
  max-height: 100% !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* @end */

/* @group Sheet */

.slide.sheet section {
  text-align: center;
  background-color: #585a5e;
}

.slide.sheet section header,
.slide.sheet .slide-content > section > h1,
.slide.sheet .slide-content > section > hgroup > h1 {
  height: 640px;
  padding: 0;
  border-style: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  background: url(brandmark-white.svg) no-repeat center center;
  background-size: 60px;
}

.slide.sheet:target section header {
  /*animation: fadeIn 1s;*/
}

.slide.sheet section:after {
  content: " ";
  height: 1px;
  display: block;
  background-color: white;
  position: absolute;
  right: 0;
  left: 0;
  top: 319px;
  width: 100%;
}

.slide.sheet section header h2,
.slide.sheet .slide-content > section > h1 {
  position: absolute;
  top: 141px;
  right: 0;
  left: 23px;
  letter-spacing: 2px;
  font: 30px/25px Dakota;
}

.slide.sheet section * {
  color: white;
}

.slide.sheet section blockquote {
  margin: 0;
  position: absolute;
  top: 78%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 880px;
  font: normal 40px "flc", Verdana, "Lucida Grande", Lucida, sans-serif;
}

.slide.sheet:target section blockquote {
  -webkit-animation: fadeIn 3s;
  letter-spacing: 1px;
}

.slide.sheet section blockquote:before {
  display: none;
}

/* @end */

/* @group Cover */

.slide.cover section {
  overflow: hidden;
}

.slide.cover section:before {
  color: black;
}

.slide.cover img,
.slide.cover svg,
.slide.cover video,
.slide.cover object {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  height: 100%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.slide.cover.w img,
.slide.cover.w svg,
.slide.cover.w video,
.slide.cover.w object {
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.slide.cover .slide-content > section > hgroup {
  position: absolute;
  bottom: 50%;
  margin: 0;
  padding-bottom: 25px;
  right: 60px;
  left: 60px;
  border-bottom: 1px solid gray;
  top: 250px;
}

.slide.cover .slide-content > section > hgroup h1 {
  margin-top: 0;
  font-size: 60px;
  margin-bottom: 25px;
}

.slide.cover section h2 {
  color: #666666;
  font: italic 25px/2 Georgia, "Times New Roman", Times, serif;
  width: 510px;
  padding-right: 51%;
  padding-bottom: 60px;
  position: relative;
  padding-top: 0;
  margin-top: 0;
}

.slide.cover section h2:before {
  top: -230px;
  left: 0;
}

.slide.cover header:before {
  content: "Design library";
  position: absolute;
  top: 30px;
  left: 153px;
  color: silver;
  z-index: 2;
  letter-spacing: 1px;
  font: normal 10px/19px "Frutiger 55 Roman";
}

/* @end */

/* @group Shout */

.slide.shout section:before {
  display: none;
}
.slide.shout h2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
  font-size: 150px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slide.shout h2 a[target="_blank"] {
  margin: 0;
}
.slide.shout h2 a[target="_blank"]:after {
  content: "";
}

/* @end */

/* @end */

/* @group Media positioning */

/* @group Image compound */

.slide section .compound {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.slide section .compound img {
  position: absolute;
  top: 0;
  left: 0;
}

/* @end */

/* @group Centre */

.slide section .centre {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.slide section figure.centre {
  display: inline-block;
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  transform: translate(-50%);
}
/* @end */

/* @group Middle */

.slide section .middle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
}

.slide section figure.middle {
  -webkit-transform: none;
  width: 1024px;
  height: 640px;
  position: static;
  display: table-cell;
  vertical-align: middle;
  margin-right: -1024px;
}

.slide section figure.middle figcaption {
  text-align: right;
  padding-right: 60px;
}

.slide.active section figure.middle figcaption {
  animation: fadeInRight 1s;
}

.slide section .middle ul {
  margin: 0;
}

.slide section .middle ul > li:before {
  position: static;
  display: inline-block;
  width: auto;
  margin: 0 6px 0 0;
  padding: 0;
  float: none;
  display: none;
}

/* @end */

/* @group Right */

.slide section .right {
  position: absolute;
  max-height: 640px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 0;
}

/* @end */

/* @group Bottom */

.slide section .bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  margin: 0;
}

.slide section figure.bottom * {
  max-height: 600px;
}

/* @end */

/* @end */

/* @group Slide overview */

@media screen {
  .pat-slides.mode-list {
    margin: 0;
    padding: 0 0 80px;
    background-color: white;
  }

  /* @group List caption */

  .pat-slides.mode-list .caption {
    margin-bottom: 20px;
    width: 910px;
    padding-top: 122px;
    background-color: white;
    padding-right: 65px;
    padding-left: 65px;
  }

  /* @end */

  /* @group List slide */

  .pat-slides.mode-list .slide {
    position: relative;
    margin: 0;
    width: auto;
    display: block;
    overflow: hidden;
    padding: 40px 0 10px 5.8%;
  }
  .pat-slides.mode-list .slide:after {
    color: silver;

    line-height: 1;
    font-size: 15px;
    float: left;
    position: absolute;
    top: 37px;
    margin-left: 0;
    text-align: right;
    left: 0;
    width: 4.4%;
  }
  .pat-slides.mode-list .slide.active:after {
    color: #819da5;
  }

  .pat-slides.mode-list .slide div.slide-content {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 8px silver;
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.2);
    outline: 1px solid silver;
    float: left;
    width: 510px;
    height: 320px;
  }
  .pat-slides.mode-list .slide > div.slide-content:hover {
    box-shadow: 0 0 0 10px rgba(60, 61, 64, 0.6);
  }
  .pat-slides.mode-list .slide.active > div.slide-content {
    box-shadow: 0 0 0 1px #305f8d, 0 0 0 10px #819da5;
  }
  .pat-slides.mode-list .slide-content section {
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -moz-transform: scale(0.5);
    -ms-transform-origin: 0 0;
    -ms-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -o-transform: scale(0.5);
    transform-origin: 0 0;
    transform: scale(0.5);
  }

  .pat-slides.mode-list .slide[dir="rtl"] .slide-content section {
    -webkit-transform-origin: right 0;
    -moz-transform-origin: right 0;
    -ms-transform-origin: right 0;
    -o-transform-origin: right 0;
    transform-origin: right 0;
  }
  /*.pat-slides.mode-list .slide section:after {
			position:absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			content:'';
			}*/

  .pat-slides.mode-list .slide > footer {
    display: block;
    color: gray;
    font-size: 14px;
    position: relative;
    top: -7px;
    overflow: hidden;
    padding-right: 5%;
    padding-left: 5%;
  }

  .pat-slides.mode-list .slide > footer ol,
  .pat-slides.mode-list .slide > footer ul {
    margin-bottom: 20px;
  }

  .pat-slides.mode-list .slide > footer * {
    color: gray;
  }

  .pat-slides.mode-list .slide > footer h1 {
    color: black;
    margin-top: 0;
    letter-spacing: 1px;
    margin-bottom: 0.5em;
    font: bold 1.2em "flc";
  }

  .pat-slides.mode-list .slide > footer section section h1 {
    text-transform: uppercase;
    margin-bottom: 1em;
    letter-spacing: 2px;
    margin-top: 0;
    font: normal normal 1em "Lucida Grande", Lucida, Verdana, sans-serif;
  }

  /* @end */
}

/* @end */

/* @group Full slide */

body.pat-slides.mode-full {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin: -320px 0 0 -512px;
  width: 1024px;
  height: 640px;
  background: #000;
}
.pat-slides.mode-full .caption {
  display: none;
}

.pat-slides.mode-full .slide {
  position: absolute;
  visibility: hidden;
}

.pat-slides.mode-full .slide.active {
  visibility: visible;
}

.pat-slides.mode-full .slide:after {
  position: absolute;
  bottom: 40px;
  left: 60px;
  color: #bbb;
  line-height: 1;
  font-size: 0.6em;
}

.pat-slides.mode-full .slide section {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.pat-slides.mode-full .slide.cover {
  z-index: 1;
}

.pat-slides.mode-full .slide.cover:after,
.pat-slides.mode-full .slide.shout:after {
  content: "";
}

/* @end */

/* @group Progress slider */

.pat-slides.mode-full .progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.pat-slides.mode-full .progress div {
  width: 0;
  height: 10px;
  background: rgba(177, 177, 177, 0.4);
  -webkit-transition: width 0.2s linear;
  -moz-transition: width 0.2s linear;
  -ms-transition: width 0.2s linear;
  -o-transition: width 0.2s linear;
  transition: width 0.2s linear;
}
.pat-slides.mode-full .progress-off {
  z-index: 1;
}

/* @end */

@media print {
  body {
    margin: 0;
    padding: 0 !important;
  }

  .fadeOut,
  #home-link,
  #page-header,
  .pat-slides.mode-list .slide footer {
    display: none;
  }
  /*
	Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
	Copyright © 2010–2012 Vadim Makeev, http://pepelsbey.net/
	Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
*/

  * {
    -webkit-print-color-adjust: exact;
  }

  @page {
    margin: 0;
    size: 1024px 640px;
  }

  /* List
---------------------------------------- */
  .pat-slides.mode-list {
    float: none;
    padding: 0;
    background: none;
  }

  .pat-slides.mode-list > footer {
    display: none;
  }

  /* Caption */
  .pat-slides.mode-list .caption {
    display: none;
  }

  /* Slide */
  .pat-slides.mode-list .slide {
    float: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    width: 1024px;
    height: 640px;
  }

  .pat-slides.mode-list .slide:after {
    position: absolute;
    left: 88px;
    color: #bbb;
    line-height: 1;
    font-size: 0.6em;
    text-shadow: none;
    bottom: 30px;
    top: auto;
  }
  .pat-slides.mode-list .slide > div.slide-content {
    width: 1024px;
    height: 640px;
    background: none;
    margin: 0;
    outline: 1px solid silver;
  }
  .pat-slides.mode-list .slide > div.slide-content,
  .pat-slides.mode-list .slide > div.slide-content:hover,
  .pat-slides.mode-list .slide.active > div.slide-content {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .pat-slides.mode-list .slide section {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}