@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  background: #8199af;
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#8199af), color-stop(75%,#b8c3ce), color-stop(100%,#e3eaed));
  background: -webkit-linear-gradient(45deg, #8199af 0%,#b8c3ce 75%,#e3eaed 100%);
  background: -webkit-linear-gradient(45deg, #8199af 0%, #b8c3ce 75%, #e3eaed 100%);
  background: linear-gradient(45deg, #8199af 0%,#b8c3ce 75%,#e3eaed 100%);
}

b, strong, dt {
  color: white;
  font-weight: 400 !important; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.6);
  margin: 1em 0;
  padding: 0;
}

.reveal {
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
  color: white;
  color: rgba(255,255,255,.8); }

::-moz-selection {
  color: white;
  background: rgba(0,0,0,.3); }

::selection {
  color: white;
  background: rgba(0,0,0,.3); }

.reveal pre code::-webkit-scrollbar-track {
  background: transparent;
}


/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 1.25rem 0;
  color: white;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  line-height: 1.25; }

/* title screens */
.reveal h1,
.reveal h2 {
  text-align: left;
  font-weight: 300;
  color: white; }

.reveal h1 {
  -webkit-hyphens: none;
     -moz-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  text-shadow:
    rgba(0,0,0,.03) 2px 2px,
    rgba(0,0,0,.0285) 4px 4px,
    rgba(0,0,0,.0270) 6px 6px,
    rgba(0,0,0,.0255) 8px 8px,
    rgba(0,0,0,.0240) 10px 10px,
    rgba(0,0,0,.0225) 12px 12px,
    rgba(0,0,0,.0210) 14px 14px,
    rgba(0,0,0,.0195) 16px 16px,
    rgba(0,0,0,.0180) 18px 18px,
    rgba(0,0,0,.0165) 20px 20px,
    rgba(0,0,0,.0150) 22px 22px,
    rgba(0,0,0,.0135) 24px 24px,
    rgba(0,0,0,.0120) 26px 26px,
    rgba(0,0,0,.0105) 28px 28px,
    rgba(0,0,0,.0090) 30px 30px,
    rgba(0,0,0,.0075) 32px 32px,
    rgba(0,0,0,.0060) 34px 34px,
    rgba(0,0,0,.0045) 36px 36px,
    rgba(0,0,0,.0030) 38px 38px,
    rgba(0,0,0,.0015) 40px 40px;
}

.reveal h2 {
  margin: 0 0 .25em 0;
}

.reveal h3,
.reveal h4 {
  margin: 0 0 .5em 0;
}


/*********************************************
 * TEXT COLORS
 *********************************************/

.text-white { color: white; }


/*********************************************
 * LINKS
 *********************************************/
.reveal a:not(.image) {
  color: white;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  transition: color .15s ease;
}

.reveal a:not(.image):hover {
  color: white;
  text-decoration: underline;
}

.reveal .roll span:after {
  color: white;
  background: #0d99a5;
}


a.generic-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: rgba(255,255,255,.3);
}

a.afx-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #5523ab;
}

a.dribbble-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #ea4c89;
}

a.dev-tools-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #b781d3;
}

a.transitions-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #ef7ead;
}

a.transforms-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #ed7e58;
}

a.animations-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #5bb6ee;
}

a.js-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #50cc7a;
}

a.angular-link:hover {
  text-decoration: none !important;
  transition: background-color .3s;
  background-color: #f77373;
}











/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
  margin: 0 0 1.25rem 0;
  -webkit-transition: all .3s;
  transition: all .3s; }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls div.navigate-left,
.reveal .controls div.navigate-left.enabled {
  border-right-color: white; }

.reveal .controls div.navigate-right,
.reveal .controls div.navigate-right.enabled {
  border-left-color: white; }

.reveal .controls div.navigate-up,
.reveal .controls div.navigate-up.enabled {
  border-bottom-color: white; }

.reveal .controls div.navigate-down,
.reveal .controls div.navigate-down.enabled {
  border-top-color: white; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0,0,0,.2); }

.reveal .progress span {
  background-color: white;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

/*********************************************
 * TEXT ALIGN
 *********************************************/

.tc { text-align: center !important; }
.tl { text-align: left !important; }
.tr { text-align: right !important; }

/*********************************************
 * GRID
 *********************************************/

.grid {
  display: block;
  padding: 0;
  margin: 0;
  text-align: left;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

.opera:-o-prefocus,
.grid {
  word-spacing: -0.43em; /* 2 */
}

.grid--center {
  text-align: center;
}

.grid-cell {
  width: 100%;
  display: inline-block !important; /* 1 */
  margin: 0;
  padding: 0;
  vertical-align: top !important; /* 2 */
  text-align: left; /* 3 */
  letter-spacing: normal; /* 4 */
  word-spacing: normal; /* 4 */
  text-rendering: auto; /* 4 */
}

.grid-cell--center,
.center {
  display: block;
  margin: 0 auto;
}

/*********************************************
 * WIDTHS
 *********************************************/

.size-1of12 {
  width: 8.333% !important;
}

.size-1of10 {
  width: 10% !important;
}

.size-1of8 {
  width: 12.5% !important;
}

.size-1of6,
.size-2of12 {
  width: 16.667% !important;
}

.size-1of5,
.size-2of10 {
  width: 20% !important;
}

.size-1of4,
.size-2of8,
.size-3of12 {
  width: 25% !important;
}

.size-3of10 {
  width: 30% !important;
}

.size-1of3,
.size-2of6,
.size-3of9,
.size-4of12 {
  width: 33.333% !important;
}

.size-3of8 {
  width: 37.5% !important;
}

.size-2of5,
.size-4of10 {
  width: 40% !important;
}

.size-5of12 {
  width: 41.667% !important;
}

.size-1of2,
.size-2of4,
.size-3of6,
.size-4of8,
.size-5of10,
.size-6of12 {
  width: 50% !important;
}

.size-7of12 {
  width: 58.333% !important;
}

.size-3of5,
.size-6of10 {
  width: 60% !important;
}

.size-5of8 {
  width: 62.5% !important;
}

.size-2of3,
.size-4of6,
.size-8of12 {
  width: 66.667% !important;
}

.size-7of10 {
  width: 70% !important;
}

.size-3of4,
.size-6of8,
.size-9of12 {
  width: 75% !important;
}

.size-4of5,
.size-8of10 {
  width: 80% !important;
}

.size-5of6,
.size-10of12 {
  width: 83.333% !important;
}

.size-7of8 {
  width: 87.5% !important;
}

.size-9of10 {
  width: 90% !important;
}

.size-11of12 {
  width: 91.667% !important;
}


/*********************************************
 * Spacing
 *********************************************/

.man { margin: 0 !important; }

.mtn { margin-top: 0 !important; }
.mts { margin-top: .5rem !important; }
.mtm { margin-top: 1rem !important; }
.mtl { margin-top: 2rem !important; }

.mrn { margin-right: 0 !important; }
.mrs { margin-right: .5rem !important; }
.mrm { margin-right: 1rem !important; }
.mrl { margin-right: 2rem !important; }

.mbn { margin-bottom: 0 !important; }
.mbs { margin-bottom: .5rem !important; }
.mbm { margin-bottom: 1rem !important; }
.mbl { margin-bottom: 2rem !important; }

.mln { margin-left: 0 !important; }
.mls { margin-left: .5rem !important; }
.mlm { margin-left: 1rem !important; }
.mll { margin-left: 2rem !important; }

.ptn { padding-top: 0 !important; }
.pts { padding-top: .5rem !important; }
.ptm { padding-top: 1rem !important; }
.ptl { padding-top: 2rem !important; }

.pln { padding-left: 0 !important; }
.pls { padding-left: .5rem !important; }
.plm { padding-left: 1rem !important; }
.pll { padding-left: 2rem !important; }

.phn { padding-left: 0 !important; padding-right: 0 !important; }
.phs { padding-left: .5rem !important; padding-right: .5rem !important; }
.phm { padding-left: 1rem !important; padding-right: 1rem !important; }
.phl { padding-left: 2rem !important; padding-right: 2rem !important; }

.ptl { padding-top: 2rem !important; }
.ptxl { padding-top: 4rem !important; }



/*********************************************
 * Vertical Align
 *********************************************/

.a-top { vertical-align: top !important; }
.a-mid { vertical-align: middle !important; }
.a-bttm { vertical-align: bottom !important; }


/*********************************************
 * MISC
 *********************************************/

.text-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.ht-200 { height: 200px; }


/*examples*/

.my-box {
  margin: 0 auto !important;
  width: 288px;
  height: 250px;
  color: #3d3d3d;
  background-color: white;
  border-radius: 8px;
  -webkit-transform: translate(0,-30px) rotate(30deg) scale(.8);
      -ms-transform: translate(0,-30px) rotate(30deg) scale(.8);
          transform: translate(0,-30px) rotate(30deg) scale(.8);
}
.my-3d-box {
  margin: 0 auto !important;
  width: 288px;
  height: 250px;
  color: #3d3d3d;
  background-color: white;
  border-radius: 8px;
  -webkit-transform: perspective(1000px) translate(0,0) rotateY(30deg) rotateX(-30deg);
          transform: perspective(1000px) translate(0,0) rotateY(30deg) rotateX(-30deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}