/*****************/
/* @group Master */
/*****************/
@import url(reset.css);
@import url(fonts.css);

/******************/
/* @group General */
/******************/
body {
  font-family: 'Source Sans Pro', verdana, sans-serif;
  font-size: 0.938em;
  background: #fff;
  color: #808080;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased; }
p, h1, h2, h3 { -webkit-user-select: text; }
a, a:link, a:visited, a:active { transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); text-decoration: none; }
hr { border: 0; margin: 20px auto 10px; }
.no-txt, i { text-align: left; text-indent: -9999px; overflow: hidden; }
.centered { margin: 0 auto; overflow: hidden; }
i { display: inline-block; }
em { font-style: italic; }
.clear { clear: both; }
.rel { position: relative; }

/* @end of General */

/*******************/
/* @group Wrappers */
/*******************/
div#wrapper {
  width: 100%; height: 100%;
  overflow-x: hidden; }
div#mobile { 
  background: #fff;
  color: #333;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; left: 0;
  display: none;
  opacity: 0;
  z-index: -100; }
/* @end of Wrappers */

/******************/
/* @group Sidebar */
/******************/
div#wrapper section#sidebar {
  position: fixed; z-index: 100; 
  left: 0; top: 0;     
  overflow-x: hidden;
  width: 80px; height: 100%;
  background: #050505; color: #fff;
  transition: width 0.3s cubic-bezier(0.005, 0.600, 0.395, 0.995),
              left 0.3s cubic-bezier(0.005, 0.600, 0.395, 0.995); }
div#wrapper.unwound section#sidebar { width: 310px; }
div#wrapper.unwound.open section#sidebar { width: 80px; }
div#wrapper.open section#sidebar { left: 490px; border-left: 1px solid #1a1a1a; }
div#wrapper.hidden section#sidebar,
div#wrapper.hidden.unwound section#sidebar { left: -80px; width: 80px; }

div#wrapper section#sidebar header {
  position: relative;
  width: 310px;
  padding: 30px 0; }
div#wrapper section#sidebar header div { width: 80px; text-align: center; float: left; }
div#wrapper section#sidebar header h1 {
	font-family: 'NeutraDisplay', sans-serif;
	font-size: 1.200em;
	font-weight: 700;
	margin-top: 8px;
	color: transparent;
	transition: color 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper section#sidebar header h2 {
	font-family: 'NeutraText', sans-serif;
	margin-top: 4px;
	font-size: 1.133em;
	font-style: italic;
	color: transparent;
	transition: color 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper.unwound section#sidebar header h1 { color: #fff; }
div#wrapper.unwound section#sidebar header h2 { color: #666; }

div#wrapper section#sidebar nav#nav { position: absolute; width: 310px; height: 265px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
div#wrapper section#sidebar nav#nav ul li a { 
  padding: 15px 0; display: block;
  font-size: 0.933em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'NeutraText', sans-serif;
  color: transparent;
  transition: color cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s; }
div#wrapper.unwound section#sidebar nav#nav ul li a { color: #333333; }
div#wrapper section#sidebar nav#nav ul li a:hover { color: #fff; }
div#wrapper section#sidebar nav#nav ul li.current a { color: transparent; }
div#wrapper.unwound section#sidebar nav#nav ul li.current a { color: #fff; }
div#wrapper section#sidebar nav#nav ul li a span { width: 80px; display: inline-block; text-align: center; }
div#wrapper section#sidebar nav#nav ul li a span i { 
  width: 7px; height: 7px;
  border-radius: 100%;
  /*box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);*/
  background-color: #333;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper section#sidebar nav#nav ul li.current a span i,
div#wrapper section#sidebar nav#nav ul li a:hover span i { 
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 1); }

div#wrapper section#sidebar nav#nav-infos { position: absolute; bottom: 0px; width: 310px; }
div#wrapper section#sidebar nav#nav-infos ul li { 
  line-height: 1.8em;
  cursor: pointer;
  padding: 20px 0; display: block;
  color: transparent;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.933em;
  border-top: 1px solid #1a1a1a;
  height: 20px;
  font-family: 'NeutraText', sans-serif;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper.unwound section#sidebar nav#nav-infos ul li { color: #333; }
div#wrapper section#sidebar nav#nav-infos ul li:hover { color: #fff; }
div#wrapper section#sidebar nav#nav-infos ul li span { width: 80px; float: left; text-align: center; opacity: 0.2; transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper section#sidebar nav#nav-infos ul li span i.infos {
  background: url(../images/i-infos@2x.png) no-repeat; background-size: 100%;
  width: 8px; height: 18px; }
div#wrapper section#sidebar nav#nav-infos ul li span i.contact {
  background: url(../images/i-contact@2x.png) no-repeat; background-size: 100%;
  width: 24px; height: 6px; }

div#wrapper section#sidebar nav#nav-infos ul li:hover span { opacity: 1; }
/* @end of Sidebar */


/*****************/
/* @group Loader */
/*****************/
section#loader {
  position: fixed; z-index: 50;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 1; 
  background: transparent;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
              background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }

section#loader.hidden {
  z-index: -100;
  opacity: 0; }

section#loader.home { background: linear-gradient(to bottom, rgba(206,211,219,.9) 0%,#fff 100%), url(../images/home/noise.png); }
section#loader.my-warner { background: linear-gradient(to right, rgba(227,40,34,.95) 0%, rgba(255,80,64,.95) 100%), url(../images/my-warner/noise.png); }
section#loader.wdmtg { background: linear-gradient(to right, rgba(51,129,193,.92) 0%,rgba(45,79,194,.92) 100%), url(../images/wdmtg/noise.png); }
section#loader.game-of-thrones { background: linear-gradient(to right, rgba(227,40,34,.95) 0%, rgba(255,80,64,.95) 100%), url(../images/game-of-thrones/noise.png); }
section#loader.kolok { background: linear-gradient(to right, rgba(16,120,204,.92) 0%, rgba(80,167,229,.92) 100%), url(../images/kolok/noise.png); }
section#loader.nike { background: linear-gradient(to right, rgba(255,98,26,.94) 0%, rgba(255,56,26,.94) 100%), url(../images/nike/noise.png); } 
section#loader.dreamcatcher { background: linear-gradient(to right, rgba(26,25,36,.88) 0%,rgba(49,41,56,.88) 100%), url(../images/dreamcatcher/noise.png); }

section#loader h1 {
  position: absolute;
  margin: auto;
  left: 0; top: 0; right: 0; bottom: 0;
  overflow: hidden;
  width: 55px; height: 120px;
  opacity: 0; 
  -webkit-transform: translateY(30px);
     -moz-transform: translateY(30px);
     			transform: translateY(30px);
  transition: all .8s cubic-bezier(0.215, 0.61, 0.355, 1); }
section#loader.visible h1 { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } 
section#loader h1 div.progress {
  position: absolute;
  bottom: 0; left: 0;
  overflow: hidden;
  width: 100%; height: 0%;
  transition: height 2s cubic-bezier(0.215, 0.61, 0.355, 1); }
section#loader h1 div.progress.completed { height: 100%; }
section#loader h1 div.progress svg {
  position: absolute;
  bottom: 0;
  height: 120px; width: 55px; }
/* @end of Loader */



/****************/
/* @group Infos */
/****************/
div#wrapper section#infos {
  position: fixed; z-index: -100;
  left: 0; top: 0;
  width: 488px; height: 100%;
  padding-right: 20px; margin-right: -20px;
  overflow-y: hidden;
  opacity: 1;
  border-right: 1px solid #0f0f0f;
  background: #050505; color: #4c4c4c; }
div#wrapper.open section#infos { z-index: 0; overflow-y: scroll; }
div#wrapper.hidden section#infos { opacity: 0; }
div#wrapper section#infos article, 
div#wrapper section#infos form { 
  width: 490px; height: 0;
  overflow: hidden; 
  opacity: 0; 
  position: absolute; 
  background: #000; 
  color: #4c4c4c; 
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper section#infos.about article,
div#wrapper section#infos.contact form { opacity: 1; height: auto; }
div#wrapper section#infos.contact form { min-height: 100%;  }
div#wrapper section#infos img { padding: 100px 0; margin: 0 auto; display: block; }
div#wrapper section#infos h1 {
  font-family: 'NeutraText', sans-serif;
  color: #fff;
  font-size: 2.000em;
  font-style: italic;
  margin: 0 60px 20px;
  line-height: 0.933em; }
div#wrapper section#infos form h1 { margin-top: 40px; margin-bottom: 15px; }
div#wrapper section#infos p {
  font-family: 'Source Sans Pro', Verdana, sans-serif;
  font-size: 1.067em;
  line-height: 1.750em;
  text-align: justify;
  font-weight: 600;
  margin: 0 60px; }
div#wrapper section#infos article hr.dotted {
  height: 1px; margin: 50px 60px;
  background: url(../images/hr-dotted-grey-bg.png); }
div#wrapper section#infos p.contact + a + hr.dotted { margin: 60px 60px 50px;}
div#wrapper section#infos p.contact { font-style: italic; margin: 50px 60px 20px; text-align: left; }
div#wrapper section#infos p.contact + a,
div#wrapper section#infos form button[type="submit"] { 
  padding: 8px 20px 5px 20px;
  margin: 0 60px 50px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.25); 
  color: rgba(255, 255, 255, 0.25); 
  background: transparent;
  text-transform: uppercase;
  font-family: 'NeutraText', sans-serif;
  font-weight: 700; 
  font-size: 0.867em;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper section#infos p.contact + a:hover,
div#wrapper section#infos form button[type="submit"]:hover { cursor: pointer; border-color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1); }
div#wrapper section#infos span.message { font-size: 0.867em; font-weight: 600; color: #fff; font-style: italic; opacity: 0; transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper section#infos span.message.visible { opacity: 1; }
div#wrapper section#infos form input[type="text"],
div#wrapper section#infos form input[type="email"],
div#wrapper section#infos form textarea { 
  width: 370px; height: 40px;
  margin: 0 60px 12px 60px;
  padding: 10px;
  border-radius: 2px; border: 0;
        -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600; 
  font-size: 0.933em; }
div#wrapper section#infos form input[type="text"] { margin-top: 40px; }
div#wrapper section#infos form button[type="submit"] { margin-bottom: 100px; margin-right: 20px }
div#wrapper section#infos form textarea { height: 260px; resize: none; }
div#wrapper section#infos form input:focus,
div#wrapper section#infos form textarea:focus,
div#wrapper section#infos form button:focus { outline: 0; }
::-webkit-input-placeholder, 
::-webkit-textarea-placeholder { font-style: italic; color: #b2b2b2; }

div#wrapper section#infos nav {
  margin-top: 100px;
  overflow: hidden;
  width: 100%;
  background: #000;
  border-top: 1px solid #1a1a1a; }
div#wrapper section#infos form nav { position: absolute; left: 0; bottom: 0; }
div#wrapper section#infos nav ul li {
  float: left; 
  border-right: 1px solid #1a1a1a; }
div#wrapper section#infos nav ul li a {
  width: 162px;
  text-align: center;
  padding: 20px 0 16px;
  display: block; }
div#wrapper section#infos nav ul li a:hover { opacity: 0.15; }
div#wrapper section#infos nav ul li:last-child { border-right: 0;}
i.twitter { width: 25px; height: 20px; background: url(../images/infos/twitter.svg) no-repeat; }
i.dribbble { width: 22px; height: 22px; background: url(../images/infos/dribbble.svg) no-repeat; }
i.behance { width: 28px; height: 17px; background: url(../images/infos/behance.svg) no-repeat; }



/* @end of Infos */

/***************/
/* @group Main */
/***************/
div#wrapper section#main {
  position: relative;
  top: 0; left: 80px;
  transition: left 0.3s cubic-bezier(0.005, 0.600, 0.395, 0.995);
  background: #000;
   }
div#wrapper.unwound section#main { left: 310px; }
div#wrapper.open section#main { left: 570px; }

/***************/
/* @group Grid */
/***************/
.grid { width: 1000px; margin: 0 auto; }
.grid .unit { margin: 0; display: block; float: left; vertical-align: top;
        -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
             box-sizing: border-box; }
.grid .unit.third--one,
.grid .unit.third--two { width: 333px; }
.grid .unit.third--one.text { padding-right: 40px; }
.grid .unit.third--three { width: 334px; }
.grid .unit.third--three.text { padding-left: 40px; }
.grid .unit.third--one-two { width: 666px; }
.grid .unit.third--two-three { width: 667px; }
.grid .unit.quarter { width: 250px; }
.grid .unit.half { width: 500px; }
/* @end of Grid */

/***************/
/* @group Home */
/***************/
div#wrapper section#main article.home {
  overflow: hidden;
  background-color: #fff;
  background: linear-gradient(to bottom, rgba(206,211,219,.9) 0, #fff 1000px), url(../images/home/noise.png);
  transition: top 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.home h1 {
  margin: 250px auto 60px;
  text-align: center;
  font-family: 'NeutraDisplay', sans-serif;
  font-weight: 300;
  font-size: 8.200em;
  letter-spacing: -0.02em;
  color: #8b94a6;
  line-height: 0.758em;
  text-transform: uppercase;
  position: relative;
  height: 470px; }
article.home h1 > span {
  position: absolute;
  margin: 0 auto;
  top: 320px; left: 0; right: 0; bottom: 0;
  opacity: 0;
  -webkit-transform: rotateX(20deg);
     -moz-transform: rotateX(20deg);
          transform: rotateX(20deg);
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.9s;}
article.home.animate h1 > span { top: 370px; opacity: 1; -webkit-transform: rotateX(0); -moz-transform: rotateX(0); transform: rotateX(0); }
article.home h1 span span { 
  color: #f2361d;
  font-weight: 700; }
article.home h1 div {
  position: absolute;
  top: -40px; left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  font-size: 3.659em;
  font-weight: 700;
  color: #fff;
  line-height: 0.773em;
  opacity: 0;
  -webkit-transform: rotateX(20deg);
     -moz-transform: rotateX(20deg);
          transform: rotateX(20deg);
  background: url(../images/home/240-shadow-bg.png) no-repeat 0 273px;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.8s; }
article.home.animate h1 div { top: 0; opacity: 1; -webkit-transform: rotateX(0); -moz-transform: rotateX(0); transform: rotateX(0); }
article.home h2 {
  font-family: 'NeutraDisplay', sans-serif;
  font-weight: 600;
  margin: 30px 0;
  text-align: center;
  color: #8b94a6;
  font-size: 0.933em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s; }
article.home.animate h2 { opacity: 1; }
article.home p.introduction {
  font-family: 'NeutraText SmallCaps', sans-serif;
  font-size: 2.200em;
  line-height: 1.333em;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  color: #8b94a6;
  background: url(../images/home/p-dotted-grey-bg.png) repeat-x left 40px;}
article.home img.for-load { display: none; }
article.home p.developer {
  font-size: 1.333em;
  color: #8b94a6;
  font-family: 'NeutraText', sans-serif;
  text-align: center;
  font-variant: normal;
  margin: 130px 0 115px; }
article.home p.developer a { color: #f2361d; font-weight: 600; transition: color cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; }
article.home p.developer a:hover { color: #8b94a6; }
article.home nav { margin: 170px auto 0; overflow: hidden; }
article.home nav ul li {
  width: 496px; height: 320px;
  float: left;
  border-radius: 4px;
  background: #f8f8fa;
  margin: 4px 0;
  position: relative; }
article.home nav ul li:nth-child(odd) { margin-right: 8px; }
article.home nav ul li div { 
  width: 100%; height: 100%;
  opacity: 0;
  border-radius: 3px;
  position: absolute; top: 0; left: 0;
  transition: opacity .8s cubic-bezier(0.000, 0.630, 0.000, 0.995); }
article.home nav ul li:hover div { 
  opacity: 1;
  transition: opacity .6s cubic-bezier(0.005, 0.685, 0.595, 0.980); }
article.home nav ul li a {
  display: block;
  width: 100%; height: 100%;
  position: relative; }
article.home nav ul li a span {
  display: block;
  position: absolute;
  margin: auto;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 140px;
  background-position: center 0; background-repeat: no-repeat;
  transition: background 0s cubic-bezier(0.545, -0.005, 1.000, 0.260); }
article.home nav ul li:hover a span {
  background-position: center -140px;
  transition: background 0.5s cubic-bezier(0.000, 0.980, 0.000, 0.990); }
article.home nav ul li.my-warner a span { background-image: url(../images/my-warner/my-warner-sprite.png); }
article.home nav ul li.my-warner div { background: linear-gradient(to right, rgba(227,40,34,.95) 0%, rgba(255,80,64,.95) 100%), url(../images/my-warner/noise.png); }
article.home nav ul li.wdmtg a span { background-image: url(../images/wdmtg/wdmtg-sprite.png); }
article.home nav ul li.wdmtg div { background: linear-gradient(to right, rgba(51,129,193,.92) 0%,rgba(45,79,194,.92) 100%), url(../images/wdmtg/noise.png); }
article.home nav ul li.game-of-thrones a span { background-image: url(../images/game-of-thrones/game-of-thrones-sprite.png); }
article.home nav ul li.game-of-thrones div { background: linear-gradient(to right, rgba(227,40,34,.95) 0%, rgba(255,80,64,.95) 100%), url(../images/game-of-thrones/noise.png); }
article.home nav ul li.kolok a span { background-image: url(../images/kolok/kolok-sprite.png); }
article.home nav ul li.kolok div { background: linear-gradient(to right, rgba(16,120,204,.92) 0%, rgba(80,167,229,.92) 100%), url(../images/kolok/noise.png); }
article.home nav ul li.dreamcatcher a span { background-image: url(../images/dreamcatcher/dreamcatcher-sprite.png); }
article.home nav ul li.dreamcatcher div { background: linear-gradient(to right, rgba(26,25,36,.88) 0%,rgba(49,41,56,.88) 100%), url(../images/dreamcatcher/noise.png); }
article.home nav ul li.nike a span { background-image: url(../images/nike/nike-sprite.png); }
article.home nav ul li.nike div { background: linear-gradient(to right, rgba(255,98,26,.94) 0%, rgba(255,56,26,.94) 100%), url(../images/nike/noise.png); }

/* @end of Home */
/*******************/
/* @group Projects */
/*******************/
div#wrapper section#main article.project {
  position: relative; z-index: 10;
  top: 0;
  margin-bottom: 440px;
  transition: top cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; }
article.project header.introduction {
  text-align: center;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
article.project header.introduction ul.meta  {
  position: relative; top: -40px; 
  opacity: 0;
  padding: 35px 0;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s,
              top 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s; }
article.project header.introduction.animate ul.meta {
  opacity: 1; top: 0; }
article.project header.introduction ul.meta { overflow: hidden; }
article.project header.introduction ul.meta li {
  padding: 0 30px;
  display: inline-block;
  font-family: 'NeutraDisplay', sans-serif;
  font-size: 0.933em;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  color: #fff; }
article.project header.introduction ul.meta li h3 { display: inline-block; }
article.project header.introduction h1 { position: relative; }
article.project header.introduction h1 img {
  position: absolute;
  top: -40px; left: 0; right: 0; margin: 0 auto;
  opacity: 0;
  -webkit-transform: rotateX(10deg);
     -moz-transform: rotateX(10deg);
          transform: rotateX(10deg);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s ; }
article.project header.introduction.animate h1 img { opacity: 1; top: 0; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
article.project header.introduction h2 {
  font-family: 'NeutraText', sans-serif;
  font-style: italic;
  font-size: 1.200em;
  line-height: 1.556em;
  position: relative;
  top: 40px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s; }
article.project header.introduction.animate h2 {
  opacity: 1; top: 0; }
article.project header.introduction div.arrow {
  width: 13px; height: 90px; 
  margin: 0 auto;
  background: transparent url(../images/arrow.png) no-repeat; }
article.project > section {
  padding: 160px 0;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
article.project section.end { padding-bottom: 0; }
article.project section h2.default {
  position: relative; z-index: 10;
  font-family: 'NeutraDisplay', sans-serif;
  font-size: 3.600em;
  font-weight: 700;
  text-align: center;
  margin: 50px 0 100px;
  opacity: 0;
  transition: opacity ease-out 0.6s; }
article.project section h2.default.animate { opacity: 1; }
article.project section h2.default > span {
  display: block;
  position: absolute;
  margin: -110px auto auto;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  font-weight: 200;
  font-size: 4.630em;
  color: #005aa3;
  opacity: 0;
  top: -10px;
  transition: opacity 0.3s cubic-bezier(0.000, 0.800, 0.510, 1.005) 0,
              top 0.3s cubic-bezier(0.000, 0.800, 0.510, 1.005) 0; }
article.project section h2.default.animate > span { 
  transition: opacity 0.3s cubic-bezier(0.000, 0.800, 0.510, 1.005) 0.4s,
              top 0.3s cubic-bezier(0.000, 0.800, 0.510, 1.005) 0.4s;
  top: 0; opacity: 1; }

article.project section h2.final-design {
  font-family: 'NeutraDisplay', sans-serif;
  font-size: 3.600em;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase; }
article.project section h2.final-design span { color: #1e1e1e; font-weight: 700; }
article.project section p.introduction {
  font-family: 'NeutraText SmallCaps', sans-serif;
  font-size: 2.200em;
  line-height: 1.333em;
  font-style: italic;
  font-weight: 300;
  text-align: center; }
article.project section h3 {
  margin-bottom: 10px;
  font-family: 'NeutraText', sans-serif;
  font-size: 1.733em;
  line-height: 0.846em;  
  text-transform: uppercase; }
article.project section h3 span {
  display: block;
  margin-top: 5px;
  font-family: 'NeutraDisplay', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.385em; }
article.project section h3.mended span { letter-spacing: -0.01em; }

article.project section hr.dotted + p { line-height: 1.667em; font-weight: 400; }
article.project section.brief img.iso {
  opacity: 0;
  transition: opacity ease-out 0.2s; }
article.project section.brief img.iso.animate { opacity: 1; }
article.project section.brief p.half {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 1.333em;
  line-height: 1.700em; }
article.project section.brief p.half.left { padding-right: 20px; }
article.project section.brief p.half.right { padding-left: 20px; }
article.project footer.thanks { 
  padding: 170px 0 230px;
  text-align: center; }
article.project footer.thanks h2 {
  font-family: 'NeutraDisplay', sans-serif;
  font-size: 3.067em;
  font-weight: 300;
  text-transform: uppercase; }
article.project footer.thanks a {
  display: inline-block;
  border-radius: 5px;
  font-size: 1.571em;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  padding: 15px 30px; }
article.project footer.thanks a:hover { border: 1px solid rgba(255, 255, 255, 1); color: #fff; }
article.project footer.thanks a span {
  font-style: normal;
  font-weight: 600; }


article.project div.iphone.left { float: left; }
article.project div.iphone.right { float: right; }
/*****************/
/* @group Slider */
/*****************/
article.project section.slider { padding: 30px 0; }
article.project section.slider nav { text-align: center; margin-bottom: 70px; }
article.project section.slider nav ul li {
  width: 70px; height: 49px;
  display: inline-block;
  margin: 0 5px;
  border-radius: 2px;
  border-style: solid;
  border-width: 3px;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 0.3;
  transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; }
article.project section.slider nav ul li:hover {
  cursor: pointer; opacity: 1; }
article.project section.slider nav ul li.active { opacity: 1; }
article.project section.slider > div { 
  position: relative;
  height: 671px; }
article.project section.slider > div ul { 
  position: absolute;
  margin: -29px auto;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: hidden;
  height: 700px;
  padding-top: 29px;
  border-radius: 5px;
  background: transparent url(../images/browser-toolbar.png) no-repeat; 
  box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer; }
article.project section.slider > div ul li { 
  position: absolute;
  top: 29px; bottom: 0; left: 0; right: 0;
  height: 700px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.project section.slider > div ul li.active { opacity: 1; }
article.project section.slider > div ul li img.full { width: 100%; height: auto; }
article.project section.slider > div ul li img.zoom { 
  position: absolute; opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              bottom 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.project section.slider > div ul li.active img.zoom { opacity: 1; }
article.project section.slider > div ul li img.zoom.left { left: 15px;}
article.project section.slider > div ul li img.zoom.right { right: 0px;}
article.project section.slider > div ul li img.zoom.center { left: 260px;}
article.project section.slider > div ul li img.zoom.top { top: 0px;}
article.project section.slider > div ul li img.zoom.bottom { bottom: 60px;}
article.project section.slider > div ul li.active img.zoom.top { top: 55px; }
article.project section.slider > div ul li.active img.zoom.bottom { bottom: 0px; }

/* @end of Slider */

/***********************/
/* @group Next-project */
/***********************/
div#wrapper section#main nav#next-project {
  position: fixed; z-index: 1;
  bottom: 0; left: 80px;
  width: 100%; height: 440px;
  background: #f8f8fa;
  transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              height 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
div#wrapper.unwound section#main nav#next-project { left: 310px; }
div#wrapper.open section#main nav#next-project { left: 580px; }
div#wrapper section#main nav#next-project.active { height: 100%; }
nav#next-project div {
  width: 100%; height: 100%;
  opacity: 0;
  position: absolute; top: 0; left: 0;
  transition: opacity .8s cubic-bezier(0.000, 0.630, 0.000, 0.995); }
nav#next-project:hover div,
nav#next-project.active div {
  opacity: 1;
  transition: opacity .4s cubic-bezier(0.000, 0.475, 0.000, 0.995); } 
nav#next-project a { position: relative; display: block; width: 100%; height: 100%; opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }

nav#next-project.active a { opacity: 0; }
nav#next-project h1 {
  position: absolute;
  margin: auto;
  height: 90px;
  color: #d8dce5;
  text-align: center;
  left: 0; right: 80px; top: 0; bottom: 0;
  font-family: 'NeutraDisplay', sans-serif;
  text-transform: uppercase;
  font-size: 0.933em;
  letter-spacing: 0.143em;
  display: block;
  font-weight: 600;
  transition: color  0s cubic-bezier(0.545, -0.005, 1.000, 0.260); }
nav#next-project:hover h1 { transition: color  0.5s cubic-bezier(0.000, 0.980, 0.000, 0.990); }
nav#next-project h1 span {
  display: block;
  position: absolute;
  margin: auto;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 140px;
  background-position: center 0; background-repeat: no-repeat;
  transition: background 0s cubic-bezier(0.545, -0.005, 1.000, 0.260); }
nav#next-project:hover h1 span {
  background-position: center -140px;
  transition: background 0.5s cubic-bezier(0.000, 0.980, 0.000, 0.990); }

nav#next-project.my-warner:hover h1 { color: #ff7862; }
nav#next-project.my-warner h1 span { background-image: url(../images/my-warner/my-warner-sprite.png); }
nav#next-project.my-warner div { background: linear-gradient(to right, rgba(227,40,34,.95) 0%, rgba(255,80,64,.95) 100%), url(../images/my-warner/noise.png); }

nav#next-project.wdmtg:hover h1 { color: #4392da; }
nav#next-project.wdmtg h1 span { background-image: url(../images/wdmtg/wdmtg-sprite.png); }
nav#next-project.wdmtg div { background: linear-gradient(to right, rgba(51,129,193,.92) 0%,rgba(45,79,194,.92) 100%), url(../images/wdmtg/noise.png); }


nav#next-project.game-of-thrones:hover h1 { color: #ff7862; }
nav#next-project.game-of-thrones h1 span { background-image: url(../images/game-of-thrones/game-of-thrones-sprite.png); }
nav#next-project.game-of-thrones div { background: linear-gradient(to right, rgba(227,40,34,.95) 0%, rgba(255,80,64,.95) 100%), url(../images/game-of-thrones/noise.png); }

nav#next-project.kolok:hover h1 { color: #75c4e5; }
nav#next-project.kolok h1 span { background-image: url(../images/kolok/kolok-sprite.png); }
nav#next-project.kolok div { background: linear-gradient(to right, rgba(16,120,204,.92) -80px, rgba(80,167,229,.92) 100%), url(../images/kolok/noise.png); }

nav#next-project.dreamcatcher:hover h1 { color: #433b52; }
nav#next-project.dreamcatcher h1 span { background-image: url(../images/dreamcatcher/dreamcatcher-sprite.png); }
nav#next-project.dreamcatcher div { background: linear-gradient(to right, rgba(26,25,36,.88) -80px,rgba(49,41,56,.88) 100%), url(../images/dreamcatcher/noise.png); }

nav#next-project.nike:hover h1 { color: #fe8a34; }
nav#next-project.nike h1 span { background-image: url(../images/nike/nike-sprite.png); }
nav#next-project.nike div { background: linear-gradient(to right, rgba(255,98,26,.94) -80px, rgba(255,56,26,.94) 100%), url(../images/nike/noise.png); }


/* @end of Next-project */

/************************/
/* @group My Warner     */
/* light red [#ff483b]; */
/* dark red [#c41010];  */
/************************/
div#wrapper section#main article.my-warner { }
article.my-warner header.introduction {
  position: relative; z-index: 400;
  min-height: 1200px;
  color: #fff; 
  background: linear-gradient(to right, rgba(227,40,34,.95) -80px, rgba(255,80,64,.95) 100%), url(../images/my-warner/noise.png); }
article.my-warner hr.dotted { 
  width: 100%; height: 1px;
  background: transparent url(../images/my-warner/p-dotted-dark-grey-bg.png) repeat-x; }
article.my-warner header.introduction h1 { margin: 360px 0 350px; min-height: 131px; }
article.my-warner header.introduction h2 { color: #ff907d; padding: 0 0 50px; }
article.my-warner header.introduction ul.meta  { border-bottom: 1px solid rgba(255, 144, 125, .4); }
article.my-warner header.introduction ul.meta li h3 { color: #ff907d; }
article.my-warner header.introduction div.arrow { background: transparent url(../images/my-warner/arrow.png) no-repeat; }
article.my-warner section.brief {
  min-height: 1520px;
  background: #eef2f6; color: #868c9e; }
article.my-warner section.brief img.iso {
  position: relative;
  margin: 120px auto 100px;
  display: block;}

article.my-warner section.movies {
  background: #161b24; color: #474f5e;
  padding: 160px 0 0; }
article.my-warner section.bonuses {
  background: #eef2f6;
  padding: 220px 0 0;
  overflow: hidden; }
article.my-warner section.profile {
  background: #161b24;
  padding: 160px 0 140px;
  overflow: hidden; }
article.my-warner section.icon {
  background: #eef2f6;
  padding: 160px 0 0;
  overflow: hidden; }
article.my-warner section.ipad {
  background: #161b24;
  padding: 160px 0 310px; }

article.my-warner section.movies p.introduction,
article.my-warner section.profile p.introduction,
article.my-warner section.ipad p.introduction { 
  background: url(../images/my-warner/p-dotted-dark-grey-bg.png) repeat-x left 40px;
  color: #474f5e; }
article.my-warner section.brief p.introduction,
article.my-warner section.bonuses p.introduction,
article.my-warner section.icon p.introduction { 
  background: url(../images/my-warner/p-dotted-light-grey-bg.png) repeat-x left 40px;
  color: #868c9e; }

article.my-warner section.movies h2.default,
article.my-warner section.profile h2.default,
article.my-warner section.ipad h2.default { color: #fff; }
article.my-warner section.brief h2.default,
article.my-warner section.bonuses h2.default,
article.my-warner section.icon h2.default { color: #e53525; }
article.my-warner section.movies h2.default span,
article.my-warner section.profile h2.default span,
article.my-warner section.ipad h2.default span { color: #bf2c19; }
article.my-warner section.brief h2.default span,
article.my-warner section.bonuses h2.default span,
article.my-warner section.icon h2.default span { color: #5d647a; }
article.my-warner section.movies h3 { color: #bf2c19; }
article.my-warner section.movies h3 > span { color: #fff; }

article.my-warner section.movies section.best-tweets { padding: 170px 0 60px; }
article.my-warner section.movies section.quizzes { padding: 120px 0; }
article.my-warner section.movies section.facts { padding: 120px 0 80px; }
article.my-warner section.movies section.statistics { padding: 120px 0 260px; }
article.my-warner section.movies section.quizzes img,
article.my-warner section.movies section.statistics img { float: right; }


article.my-warner section.movies section.best-tweets img,
article.my-warner section.movies section.quizzes img,
article.my-warner section.movies section.facts img,
article.my-warner section.movies section.statistics img { opacity: 0; transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.my-warner section.movies section.best-tweets.animate img,
article.my-warner section.movies section.quizzes.animate img,
article.my-warner section.movies section.facts.animate img,
article.my-warner section.movies section.statistics.animate img { opacity: 1; }

article.my-warner section.movies h2.final-design { color: #bf2c19; margin-bottom: 150px; }
article.my-warner section.movies h2.final-design span { color: #fff; }

article.my-warner section.movies section.final-design > div {
  height: 1070px;
  position: relative;
  background: linear-gradient(to right, rgba(227,40,34,.95) -80px, rgba(255,80,64,.95) 100%), url(../images/my-warner/noise.png); } 
article.my-warner section.movies section.final-design > div ul { 
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: -73px auto; }
article.my-warner section.profile ul { margin: 160px auto 0; }
article.my-warner section.movies section.final-design > div ul li { margin-bottom: 25px; }
article.my-warner section.profile ul li { margin-bottom: 60px; }
article.my-warner section.movies section.final-design .third--one,
article.my-warner section.profile .third--one { padding-right: 10px; width: auto; }
article.my-warner section.movies section.final-design .third--two,
article.my-warner section.profile .third--two { padding: 0 10px; width: auto; }
article.my-warner section.movies section.final-design .third--three,
article.my-warner section.profile .third--three { padding-left: 10px; width: auto; }

article.my-warner section.movies section.final-design > div ul li img,
article.my-warner section.profile ul li img {
  opacity: 0;
  -webkit-transform: rotateY(25deg);
     -moz-transform: rotateY(25deg);
      -ms-transform: rotateY(25deg);
          transform: rotateY(25deg);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.my-warner section.movies section.final-design.animate > div ul li img,
article.my-warner section.profile.animate ul li img { 
  opacity: 1;
  -webkit-transform: rotateY(0);
     -moz-transform: rotateY(0);
      -ms-transform: rotateY(0);
          transform: rotateY(0); }

article.my-warner section.movies section.final-design > div ul li img,
article.my-warner section.profile ul li img { transition-delay: 0s; }

article.my-warner section.movies section.final-design.animate > div ul li:nth-child(2) img,
article.my-warner section.profile.animate li:nth-child(2) img { transition-delay: 0.2s; }
article.my-warner section.movies section.final-design.animate > div ul li:nth-child(3) img,
article.my-warner section.profile.animate ul li:nth-child(3) img { transition-delay: 0.4s; }
article.my-warner section.movies section.final-design.animate > div ul li:nth-child(4) img,
article.my-warner section.profile.animate ul li:nth-child(4) img { transition-delay: 0.6s; }
article.my-warner section.movies section.final-design.animate > div ul li:nth-child(5) img,
article.my-warner section.profile.animate ul li:nth-child(5) img { transition-delay: 0.8s; }
article.my-warner section.movies section.final-design.animate > div ul li:nth-child(6) img,
article.my-warner section.profile.animate ul li:nth-child(6) img { transition-delay: 1.0s; }
article.my-warner section.bonuses img { margin-bottom: 31px; }
article.my-warner section.bonuses section,
article.my-warner section.icon section { margin: 160px 0 230px; }
article.my-warner section.ipad section { margin: 160px 0 0; }


article.my-warner section.bonuses section img { 
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0;  }
article.my-warner section.bonuses section.animate div:first-of-type img:nth-of-type(1),
article.my-warner section.bonuses section.animate-more div:nth-of-type(5) img:nth-of-type(1) { opacity: 1; }

article.my-warner section.bonuses section div:nth-of-type(2) img:nth-of-type(1),
article.my-warner section.bonuses section div:nth-of-type(2) img:nth-of-type(2),
article.my-warner section.bonuses section div:nth-of-type(4) img:nth-of-type(1),
article.my-warner section.bonuses section div:nth-of-type(4) img:nth-of-type(2) {
  -webkit-transform: rotateY(25deg);
     -moz-transform: rotateY(25deg);
          transform: rotateY(25deg);
  opacity: 0;
  transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -moz-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
article.my-warner section.bonuses section.animate div:nth-of-type(2) img:nth-of-type(1),
article.my-warner section.bonuses section.animate div:nth-of-type(2) img:nth-of-type(2),
article.my-warner section.bonuses section.animate-more div:nth-of-type(4) img:nth-of-type(1),
article.my-warner section.bonuses section.animate-more div:nth-of-type(4) img:nth-of-type(2) { 
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1; }

article.my-warner section.bonuses section.animate div:nth-of-type(2) img:nth-of-type(1),
article.my-warner section.bonuses section.animate-more div:nth-of-type(4) img:nth-of-type(1) { transition-delay: 0.2s; }
article.my-warner section.bonuses section.animate div:nth-of-type(2) img:nth-of-type(2),
article.my-warner section.bonuses section.animate-more div:nth-of-type(4) img:nth-of-type(2) { transition-delay: 0.4s;}
article.my-warner section.icon section.wireframes > div:first-of-type > div.rel { width: 252px; height: 252px; }
article.my-warner section.icon section.wireframes img { 
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0; }
article.my-warner section.icon section.wireframes.animate img { opacity: 1; }
article.my-warner section.icon section.wireframes > div:first-of-type > div.rel > img:nth-of-type(2) {
  position: absolute;
  margin: auto;
  left: 0; right: 0; top: 0; bottom: 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
          transform: scale(0);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.my-warner section.icon section.wireframes.animate > div:first-of-type > div.rel img:nth-of-type(2) { 
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
          transform: scale(1);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              -moz-transform 0.3s  cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s ;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s; }
article.my-warner section.icon section.wireframes > div:nth-of-type(2) > div.rel img { 
  position: absolute;
  top: 0; right: 0;
  transition-delay: 0; }
article.my-warner section.icon section.wireframes.animate > div:nth-of-type(2) > div.rel img {
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              right 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.6s; }

article.my-warner section.icon section.wireframes.animate > div:nth-of-type(2) > div.rel img:nth-of-type(1) { right: 0; }
article.my-warner section.icon section.wireframes.animate > div:nth-of-type(2) > div.rel img:nth-of-type(2) { right: 139px; }
article.my-warner section.icon section.wireframes.animate > div:nth-of-type(2) > div.rel img:nth-of-type(3) { right: 277px;}
article.my-warner section.icon section.wireframes.animate > div:nth-of-type(2) > div.rel img:nth-of-type(4) { right: 416px;}

article.my-warner section.ipad div.ipad {
  background: url(../images/my-warner/ipad.png) no-repeat;
  width: 1000px; height: 660px; padding: 26px 0 0 95px;
      -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
           box-sizing: border-box; }
article.my-warner section.ipad div.ipad img {
  opacity: 0;
  transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; }
article.my-warner section.ipad.animate div.ipad img { opacity: 1; }
article.my-warner section.ipad div.ipad + div.rel img {
  margin: 0 auto;
  display: block;
  position: absolute;
  top: -100px; left: 0; right: 0;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
              top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s; }
article.my-warner section.ipad.animate div.ipad + div.rel img { opacity: 1; top: 0; transition-delay: 0.2s; }


article.my-warner footer.thanks { padding: 225px 0 260px; background: #161b24; 
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); }
article.my-warner footer.thanks h2 { color: #bf2c19; margin-bottom: 35px; }
article.my-warner footer.thanks a.app-store, 
article.my-warner footer.thanks a.google-play {
  display: inline-block;
  margin: 0 10px;
  height: 55px;
  border: none;
  padding: 0; }
article.my-warner footer.thanks a.app-store {
  background: url(../images/my-warner/app-store.png) no-repeat; width: 188px; }
article.my-warner footer.thanks a.google-play {
  background: url(../images/my-warner/google-play.png) no-repeat; width: 198px;}
article.my-warner footer.thanks p {
  color: #313640;
  margin-top: 75px;
  font-size: 1em;
  line-height: 1.533em; }
/************************/
/* @group WDMTG          */
/* light blue [#3381c1]; */
/* dark blue [#2d4fc2];  */
/*************************/
div#wrapper section#main article.wdmtg { }
article.wdmtg header.introduction {
  position: relative; z-index: 400;
  min-height: 1200px;
  color: #fff; 
  background: linear-gradient(to right, rgba(51,129,193,.92) -80px,rgba(45,79,194,.92) 100%), url(../images/wdmtg/noise.png); }
article.wdmtg hr.dotted { 
à  width: 100%; height: 1px;
  background: transparent url(../images/wdmtg/hr-dotted-light-grey-bg.png) repeat-x; }
article.wdmtg header.introduction h1 { margin: 360px 0 300px; min-height: 182px; }
article.wdmtg header.introduction h2 { color: #4d9de8; padding: 0 0 50px; }
article.wdmtg header.introduction ul.meta  { border-bottom: 1px solid rgba(77, 157, 232, .3); }
article.wdmtg header.introduction ul.meta li h3 { color: #4d9de8; }
article.wdmtg section.brief {
  min-height: 1520px;
  position: relative; z-index: 300;
  background: #111; color: #666; }
article.wdmtg header.introduction div.arrow { background: transparent url(../images/wdmtg/arrow.png) no-repeat; }
article.wdmtg section.brief h2.default { color: #fff; }
article.wdmtg section.brief h2.default span { color: #0c68b3; }
article.wdmtg section.brief p.introduction { 
  background: url(../images/wdmtg/p-dotted-dark-blue-bg.png) repeat-x left 40px;
  color: #0c68b3; }
article.wdmtg section.brief img.iso {
  position: relative;
  margin: 120px auto;
  display: block; }

article.wdmtg section.pro-signup {
  background: #f2f2f2; 
  padding: 160px 0; }
article.wdmtg section.custom-feeds {
  background: #f2f2f2; 
  padding: 0;
  overflow: hidden; }
article.wdmtg section.pro-signup h2.default,
article.wdmtg section.custom-feeds h2.default { color: #1e1e1e; }
article.wdmtg section.custom-feeds h2.default span,
article.wdmtg section.pro-signup h2.default span { color: #157fd6; }
article.wdmtg section.pro-signup h2.final-design,
article.wdmtg section.custom-feeds h2.final-design { color: #157fd6; }
article.wdmtg section.pro-signup h2.final-design span,
article.wdmtg section.custom-feeds h2.final-design span { color: #1e1e1e; }
article.wdmtg section.pro-signup p.introduction,
article.wdmtg section.custom-feeds p.introduction { 
  background: url(../images/wdmtg/p-dotted-light-blue-bg.png) repeat-x left 40px;
  color: #157fd6; }
article.wdmtg section.pro-signup h3,
article.wdmtg section.custom-feeds h3 { color: #3381c1; }
article.wdmtg section.pro-signup h3 > span,
article.wdmtg section.custom-feeds h3 > span { color: #292929; }
article.wdmtg section.pro-signup section.process,
article.wdmtg section.pro-signup section.full-control,
article.wdmtg section.pro-signup section.visual-clues,
article.wdmtg section.custom-feeds section.powerful-tool { padding: 125px 0; }
article.wdmtg section.custom-feeds section.feeds { padding: 125px 0 200px; }
article.wdmtg section.custom-feeds section.top-up { padding: 220px 0 125px; }
article.wdmtg section.pro-signup section.visual-clues img { float: right; }

article.wdmtg section.pro-signup section.visual-clues img,
article.wdmtg section.pro-signup section.full-control img { opacity: 0; transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.wdmtg section.pro-signup section.visual-clues.animate img,
article.wdmtg section.pro-signup section.full-control.animate img { opacity: 1; }

article.wdmtg section.final-design { padding: 125px 0 0; }
article.wdmtg section.final-design section.slider > div {
  background: linear-gradient(to right, rgba(51,129,193,.92) 80px,rgba(45,79,194,.92) 100%), url(../images/wdmtg/noise.png); }
article.wdmtg section.final-design section.slider > div ul { background: #f2f2f2 url(../images/browser-toolbar.png) no-repeat; }
article.wdmtg section.final-design section.slider nav ul li{
  border-color: #f06448;
  background: rgba(240, 100, 72, 0.3); }
article.wdmtg section.final-design.end section.slider { padding: 30px 0 0; }
article.wdmtg section.final-design.end section.slider > div { height: 750px; }

article.wdmtg section.pro-signup section.process img { 
  position: absolute; left: 60px; 
  transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.wdmtg section.pro-signup section.process img:nth-child(1) { z-index: 3; left: 60px; }
article.wdmtg section.pro-signup section.process img:nth-child(2),
article.wdmtg section.pro-signup section.process img:nth-child(3) { opacity: 0; }
article.wdmtg section.pro-signup section.process.animate img:nth-child(2) { z-index: 2; left: 268px; opacity: 0.6; }
article.wdmtg section.pro-signup section.process.animate img:nth-child(3) { z-index: 1; left: 476px; opacity: 0.6; }

article.wdmtg section.custom-feeds section.powerful-tool { min-height: 430px; }
article.wdmtg section.custom-feeds section.powerful-tool img:nth-child(2) {
  position: absolute;
  left: 0; top: 240px;
  opacity: 0;
  transition: top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.wdmtg section.custom-feeds section.powerful-tool.animate img:nth-child(2) { top: 270px; opacity: 1; }

article.wdmtg section.custom-feeds section.top-up { min-height: 300px; }
article.wdmtg section.custom-feeds section.top-up img:nth-child(2), 
article.wdmtg section.custom-feeds section.top-up img:nth-child(3) {
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: 0 auto;
  opacity: 0;
  transition: top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.wdmtg section.custom-feeds section.top-up.animate img:nth-child(2) { z-index: 3; top: 68px; opacity: 1; }
article.wdmtg section.custom-feeds section.top-up.animate img:nth-child(3) { z-index: 2; top: 320px; opacity: 1; }

article.wdmtg section.custom-feeds section.feeds img {
  position: absolute; left: 0; opacity: 0;
  transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s,
              opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; }
article.wdmtg section.custom-feeds section.feeds img:nth-child(3){
  transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s,
              opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.wdmtg section.custom-feeds section.feeds.animate img { opacity: 1; }
article.wdmtg section.custom-feeds section.feeds.animate img:nth-child(2) { left: 183px; }
article.wdmtg section.custom-feeds section.feeds.animate img:nth-child(3) { left: 365px; z-index: 3; }
article.wdmtg section.custom-feeds section.feeds.animate img:nth-child(1) { left: 0px; opacity: 1; }
article.wdmtg section.custom-feeds section.feeds.animate img:nth-child(2) { left: 183px; opacity: 1; }


article.wdmtg section.custom-feeds section.final-design { padding: 250px 0 0; }


article.wdmtg footer.thanks { 
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1); 
  background: linear-gradient(to right, rgba(51,129,193,.92) 80px,rgba(45,79,194,.92) 100%), url(../images/wdmtg/noise.png);}
article.wdmtg footer.thanks h2 { color: #4392da; margin-bottom: 30px; }
article.wdmtg footer.thanks a {
  border: 1px solid #4392da;
  color: #4392da; }
article.wdmtg footer.thanks a:hover { color: #2d4fc2; border: 1px solid #2d4fc2; }

/* @end of WDMTG */

/**************************/
/* @group Game of Thrones */
/* light red [#ff483b];   */
/* dark red [#c41010];    */
/**************************/
div#wrapper section#main article.game-of-thrones { }
article.game-of-thrones header.introduction {
  position: relative; z-index: 400;
  min-height: 1200px;
  color: #fff; 
  background: linear-gradient(to right, rgba(227,40,34,.95) -80px, rgba(255,80,64,.95) 100%), url(../images/game-of-thrones/noise.png); }
article.game-of-thrones hr.dotted { 
  width: 100%; height: 1px;
  background: transparent url(../images/game-of-thrones/p-dotted-dark-grey-bg.png) repeat-x; }
article.game-of-thrones header.introduction h1 { margin: 360px 0 360px; min-height: 119px; }
article.game-of-thrones header.introduction h2 { color: #ff907d; padding: 0 0 50px; }
article.game-of-thrones header.introduction ul.meta  { border-bottom: 1px solid rgba(255, 144, 125, .4); }
article.game-of-thrones header.introduction ul.meta li h3 { color: #ff907d; }
article.game-of-thrones header.introduction div.arrow { background: transparent url(../images/game-of-thrones/arrow.png) no-repeat; }
article.game-of-thrones section.brief {
  min-height: 1520px;
  position: relative; z-index: 300;
  background: #f5f5f5; color: #9a9dad; }
article.game-of-thrones section.brief h2.default { color: #30323b; }
article.game-of-thrones section.brief h2.default span { color: #ff331c; }
article.game-of-thrones section.brief p.introduction { 
  background: url(../images/game-of-thrones/p-dotted-light-grey-bg.png) repeat-x left 40px;
  color: #9a9dad; }
article.game-of-thrones section.brief img.iso {
  margin: 125px auto 65px;
  display: block; }
article.game-of-thrones section.brief img.iso.animate { opacity: 1; }
article.game-of-thrones section.countdown {
  background: #0e0f12; color: #40444f;
  padding: 160px 0; }
article.game-of-thrones section.player,
article.game-of-thrones section.mobile {
  background: #0e0f12; color: #40444f;
  padding: 0 0 160px;
  overflow: hidden; }
article.game-of-thrones section.mobile { padding: 0; }
article.game-of-thrones section.countdown p.introduction,
article.game-of-thrones section.player p.introduction,
article.game-of-thrones section.mobile p.introduction { 
  background: url(../images/game-of-thrones/p-dotted-dark-grey-bg.png) repeat-x left 40px;
  color: #41444f; }
article.game-of-thrones section.countdown h2.default,
article.game-of-thrones section.player h2.default,
article.game-of-thrones section.mobile h2.default { color: #fff; }
article.game-of-thrones section.countdown h2.default span,
article.game-of-thrones section.player h2.default span,
article.game-of-thrones section.mobile h2.default span { color: #d61702; }
article.game-of-thrones section.player h3,
article.game-of-thrones section.countdown h3,
article.game-of-thrones section.mobile h3 { color: #d61702; }
article.game-of-thrones section.player h3 > span,
article.game-of-thrones section.countdown h3 > span,
article.game-of-thrones section.mobile h3 > span { color: #fff; }
article.game-of-thrones section.countdown section.badges,
article.game-of-thrones section.countdown section.hours,
article.game-of-thrones section.player section.content,
article.game-of-thrones section.player section.cards,
article.game-of-thrones section.player section.browser { padding: 125px 0; }

article.game-of-thrones section.player section.content div > img { position: absolute; width: 440px; left: 50%; margin-left: -223px; top: 0; z-index: 20; }
article.game-of-thrones section.player section.content h3 { margin-top: 45px; }
article.game-of-thrones section.player section.content p { margin-bottom: 35px; }
article.game-of-thrones section.countdown h2.final-design,
article.game-of-thrones section.player h2.final-design { color: #d61702; }
article.game-of-thrones section.countdown h2.final-design span,
article.game-of-thrones section.player h2.final-design span { color: #fff; }
article.game-of-thrones section.final-design { padding: 80px 0 0; }
article.game-of-thrones section.final-design section.slider > div {
  background: linear-gradient(to right, rgba(227,40,34,.95) -80px, rgba(255,80,64,.95) 100%), url(../images/game-of-thrones/noise.png); }
article.game-of-thrones section.final-design section.slider > div ul { background: #000 url(../images/browser-toolbar.png) no-repeat;}
article.game-of-thrones section.final-design section.slider nav ul li {
  border-color: #41444f;
  background: rgba(65, 68, 79, 0.3); }

article.game-of-thrones section.mobile h3 { margin: 60px 0 25px; }
article.game-of-thrones section.mobile div.iphone {
  width: 633px; height: 1360px;
  padding: 196px 53px;
  background: transparent url(../images/game-of-thrones/iphone.png) no-repeat top left;
        -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
             box-sizing: border-box; }
article.game-of-thrones section.mobile img.mobile-shadow { margin: 10px 0 0; }
article.game-of-thrones section.mobile section.remote { padding: 160px 0 80px; }
article.game-of-thrones section.mobile section.feed { padding: 80px 0; }


article.game-of-thrones section.countdown section.hours img,
article.game-of-thrones section.countdown section.badges img,
article.game-of-thrones section.player section.cards img,
article.game-of-thrones section.player section.browser img { 
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);  }
article.game-of-thrones section.countdown section.hours.animate img,
article.game-of-thrones section.countdown section.badges.animate img,
article.game-of-thrones section.player section.cards.animate img,
article.game-of-thrones section.player section.browser.animate img { opacity: 1; }

article.game-of-thrones section.player section.content img {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s; }
article.game-of-thrones section.player section.content.animate img { opacity: 1; }
article.game-of-thrones section.player section.content div > img:first-of-type {
  top: 30px;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
              top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s; }
article.game-of-thrones section.player section.content.animate div > img:first-of-type { top: 0; transition-delay: 0.3s; }


article.game-of-thrones section.mobile section.remote img,
article.game-of-thrones section.mobile section.feed img { 
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0;  }
article.game-of-thrones section.mobile section.remote.animate img,
article.game-of-thrones section.mobile section.feed.animate img { opacity: 1; }

article.game-of-thrones section.mobile section.remote > div:nth-of-type(2) img,
article.game-of-thrones section.mobile section.feed > div:nth-of-type(1) img {
  -webkit-transform: rotateY(25deg);
          transform: rotateY(25deg);
  opacity: 0;
  transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.game-of-thrones section.mobile section.remote.animate > div:nth-of-type(2) img,
article.game-of-thrones section.mobile section.feed.animate > div:nth-of-type(1) img { 
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1; }

article.game-of-thrones section.mobile section.remote.animate > div:nth-of-type(2) img:nth-of-type(1),
article.game-of-thrones section.mobile section.feed.animate > div:nth-of-type(1) img:nth-of-type(1) { transition-delay: 0.2s; }
article.game-of-thrones section.mobile section.remote.animate > div:nth-of-type(2) img:nth-of-type(2),
article.game-of-thrones section.mobile section.feed.animate > div:nth-of-type(1) img:nth-of-type(2) { transition-delay: 0.4s; }

article.game-of-thrones footer.thanks { 
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); 
  padding: 130px 0 230px; background: #0e0f12; }
article.game-of-thrones footer.thanks h2 { color: #41444f; }
/* @end Game of Thrones */

/*******************/
/* @group Kolok    */
/* blue [#2787cc]; */
/*******************/
article.kolok header.introduction {
  position: relative; z-index: 500;
  min-height: 1200px;
  color: #fff;
  background: linear-gradient(to right, rgba(16,120,204,.92) -80px, rgba(80,167,229,.92) 100%), url(../images/kolok/noise.png); }
article.kolok header.introduction h1 { margin: 320px 0 300px; min-height: 224px; }
article.kolok header.introduction h2 { color: #75c4e5; padding: 0 0 50px; }
article.kolok header.introduction ul.meta { border-bottom: 1px solid rgba(117, 196, 229, 0.3); }
article.kolok header.introduction ul.meta li h3 { color: #75c4e5; }
article.kolok header.introduction div.arrow { background: transparent url(../images/kolok/arrow.png) no-repeat; }

article.kolok section.brief {
  min-height: 1520px;
  padding: 160px 0 140px;
  background: #171c21; color: #3d4754; }
article.kolok section.design-guidelines {
  padding: 160px 0;
  background: #f0f8ff; color: #929da8; }
article.kolok section.datavisualizations {
  min-height: 1520px;
  padding: 160px 0;
  background: #171c21; color: #3d4754; }
article.kolok section.final-design {
  padding: 160px 0 0;
  background: #f0f8ff; color: #929da8; }
article.kolok section.brief h2.default,
article.kolok section.datavisualizations h2.default { color: #fff; }
article.kolok section.design-guidelines h2.default,
article.kolok section.final-design h2.default { color: #171c21; }
article.kolok section.brief h2.default span,
article.kolok section.datavisualizations h2.default span { color: #0086e5; }
article.kolok section.design-guidelines h2.default span,
article.kolok section.final-design h2.default span { color: #0086e5; }
article.kolok section.brief p.introduction,
article.kolok section.datavisualizations p.introduction { 
  background: url(../images/kolok/p-dotted-dark-grey-bg.png) repeat-x left 40px;
  color: #3d4754; }
article.kolok section.design-guidelines p.introduction { 
  background: url(../images/kolok/p-dotted-light-grey-bg.png) repeat-x left 40px;
  color: #929da8; }
article.kolok section.datavisualizations hr.dotted { 
  width: 100%; height: 1px;
  background: transparent url(../images/my-warner/p-dotted-dark-grey-bg.png) repeat-x; }
article.kolok section.design-guidelines hr.dotted { 
  width: 100%; height: 1px;
  background: transparent url(../images/my-warner/p-dotted-light-grey-bg.png) repeat-x; }
article.kolok section.brief img.iso {
  margin: 115px auto 100px;
  display: block; }


article.kolok section.design-guidelines h3,
article.kolok section.final-design h3 { color: #0086e5; }
article.kolok section.datavisualizations h3 { color: #2787cc; }     
article.kolok section.design-guidelines h3 > span,
article.kolok section.final-design h3 > span { color: #171c21; }
article.kolok section.datavisualizations h3 > span { color: #fff; }


article.kolok section.design-guidelines section.the-k-icon,
article.kolok section.design-guidelines section.color-palette { padding: 160px 0 100px; }
article.kolok section.design-guidelines section.typography { padding: 160px 0 60px; }
article.kolok section.datavisualizations section.share-expenses, 
article.kolok section.datavisualizations section.who-owes-who { padding: 160px 0 90px; }
article.kolok section.datavisualizations section.bank-account { padding: 160px 0 80px; }
article.kolok section.datavisualizations section.total-expenses { padding: 160px 0 60px; }
article.kolok section.datavisualizations section.total-expenses img,
article.kolok section.datavisualizations section.who-owes-who img { float: right; }

article.kolok section.final-design section.home-screen,
article.kolok section.final-design section.expenses-details,
article.kolok section.final-design section.services-location,
article.kolok section.final-design section.welcome-process { padding: 120px 0; }

article.kolok section.final-design div.iphone {
  width: 633px; height: 1360px;
  padding: 196px 53px;
  background: transparent url(../images/kolok/iphone.png) no-repeat top left;
        -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
             box-sizing: border-box; }
article.kolok section.final-design img.mobile-shadow { margin: 10px 0 0; }
article.kolok section.final-design h3 { margin: 60px 0 25px; }
article.kolok section.mobile div.iphone {
  width: 633px; height: 1360px;
  padding: 196px 53px;
  background: transparent url(../images/game-of-thrones/iphone.png) no-repeat top left;
        -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
             box-sizing: border-box; }



article.kolok section.design-guidelines section.the-k-icon > div:nth-of-type(2) > div.rel { float: left; margin-left: 80px; width: 252px; height: 252px; }
article.kolok section.design-guidelines section.the-k-icon img { 
  transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  opacity: 0; }
article.kolok section.design-guidelines section.the-k-icon.animate img { opacity: 1; }
article.kolok section.design-guidelines section.the-k-icon > div:nth-of-type(2) > div.rel > img:nth-of-type(2) {
  position: absolute;
  margin: auto;
  left: 0; right: 0; top: 0; bottom: 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
          transform: scale(0);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.kolok section.design-guidelines section.the-k-icon.animate > div:nth-of-type(2) > div.rel img:nth-of-type(2) { 
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
          transform: scale(1);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              -moz-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s; }
article.kolok section.design-guidelines section.the-k-icon > div:nth-of-type(2) > img {
  position: absolute;
  top: 0; left: 80px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s; }
article.kolok section.design-guidelines section.the-k-icon.animate > div:nth-of-type(2) > img {
  opacity: 1;
  left: 372px; 
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.6s, 0.9s;}
article.kolok section.design-guidelines section.color-palette img { 
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0; }
article.kolok section.design-guidelines section.color-palette.animate img { opacity: 1; }
article.kolok section.design-guidelines section.color-palette.animate img:nth-of-type(2) { transition-delay: 0.2s; } 
article.kolok section.design-guidelines section.color-palette.animate img:nth-of-type(3) { transition-delay: 0.4s; } 
article.kolok section.design-guidelines section.color-palette.animate img:nth-of-type(4) { transition-delay: 0.6s; } 
article.kolok section.design-guidelines section.typography img { margin-left: 80px; }

article.kolok section.design-guidelines section.typography img,
article.kolok section.datavisualizations section.share-expenses img,
article.kolok section.datavisualizations section.who-owes-who img,
article.kolok section.datavisualizations section.bank-account img,
article.kolok section.datavisualizations section.total-expenses img { 
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);  }
article.kolok section.design-guidelines section.typography.animate img,
article.kolok section.datavisualizations section.share-expenses.animate img,
article.kolok section.datavisualizations section.who-owes-who.animate img,
article.kolok section.datavisualizations section.bank-account.animate img,
article.kolok section.datavisualizations section.total-expenses.animate img  { opacity: 1; }

article.kolok section.final-design section.home-screen img,
article.kolok section.final-design section.expenses-details img,
article.kolok section.final-design section.services-location img,
article.kolok section.final-design section.welcome-process img { 
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0;  }
article.kolok section.final-design section.home-screen.animate img,
article.kolok section.final-design section.expenses-details.animate img,
article.kolok section.final-design section.services-location.animate img,
article.kolok section.final-design section.welcome-process.animate img { opacity: 1; }

article.kolok section.final-design section.home-screen > div:nth-of-type(2) img,
article.kolok section.final-design section.expenses-details > div:nth-of-type(1) img,
article.kolok section.final-design section.services-location > div:nth-of-type(2) img,
article.kolok section.final-design section.welcome-process > div:nth-of-type(1) img {
  -webkit-transform: rotateY(25deg);
     -moz-transform: rotateY(25deg);
          transform: rotateY(25deg);
  opacity: 0;
  transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -moz-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.kolok section.final-design section.home-screen.animate > div:nth-of-type(2) img,
article.kolok section.final-design section.expenses-details.animate > div:nth-of-type(1) img,
article.kolok section.final-design section.services-location.animate > div:nth-of-type(2) img,
article.kolok section.final-design section.welcome-process.animate > div:nth-of-type(1) img { 
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1; }

article.kolok section.final-design section.home-screen.animate > div:nth-of-type(2) img:nth-of-type(1),
article.kolok section.final-design section.expenses-details.animate > div:nth-of-type(1) img:nth-of-type(1),
article.kolok section.final-design section.services-location.animate > div:nth-of-type(2) img:nth-of-type(1),
article.kolok section.final-design section.welcome-process.animate > div:nth-of-type(1) img:nth-of-type(1) { transition-delay: 0.2s; }
article.kolok section.final-design section.home-screen.animate > div:nth-of-type(2) img:nth-of-type(2),
article.kolok section.final-design section.expenses-details.animate > div:nth-of-type(1) img:nth-of-type(2),
article.kolok section.final-design section.services-location.animate > div:nth-of-type(2) img:nth-of-type(2),
article.kolok section.final-design section.welcome-process.animate > div:nth-of-type(1) img:nth-of-type(2) { transition-delay: 0.4s; }



article.kolok footer.thanks {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07); 
  background: #f0f8ff;
  padding: 110px 0 240px; }
article.kolok footer.thanks h2 { color: #0086e5; }
/* @end of Kolok */


/***********************/
/* @group Dreamcatcher */
/* blue [#f9650f];     */
/***********************/
article.dreamcatcher header.introduction {
  position: relative; z-index: 600;
  min-height: 1200px;
  color: #fff;
  background: linear-gradient(to right, rgba(26,25,36,.88) -80px,rgba(49,41,56,.88) 100%), url(../images/dreamcatcher/noise.png); }

article.dreamcatcher header.introduction h1 { margin: 360px 0 370px; min-height: 113px; }
article.dreamcatcher header.introduction h2 { color: #433b52; padding: 0 0 50px; }
article.dreamcatcher header.introduction ul.meta { border-bottom: 1px solid rgba(67, 59, 82, 0.3); }
article.dreamcatcher header.introduction ul.meta li h3 { color: #433b52; }
article.dreamcatcher header.introduction div.arrow { background: transparent url(../images/dreamcatcher/arrow.png) no-repeat; }

article.dreamcatcher section.brief {
  min-height: 1480px;
  padding: 160px 0 140px;
  background: #f3f2f7; color: #938fab; }
article.dreamcatcher section.brief img.iso {
  margin: 115px auto 90px;
  display: block; }


article.dreamcatcher section.brief h2.default,
article.dreamcatcher section.mobile-ready h2.default { color: #332f4f; }
article.dreamcatcher section.desktop h2.default { color: #fff; }
article.dreamcatcher section.brief h2.default span,
article.dreamcatcher section.mobile-ready h2.default span { color: #a267e5; }
article.dreamcatcher section.desktop h2.default span { color: #5b318c; }
article.dreamcatcher section.desktop h3 { color: #5c328d; }
article.dreamcatcher section.desktop h3 > span { color: #fff; }
article.dreamcatcher section.brief p.introduction,
article.dreamcatcher section.mobile-ready p.introduction { 
  background: url(../images/dreamcatcher/p-dotted-light-grey-bg.png) repeat-x left 40px;
  color: #9390ab; }
article.dreamcatcher section.desktop p.introduction { 
  background: url(../images/dreamcatcher/p-dotted-dark-grey-bg.png) repeat-x left 40px;
  color: #474557; }
article.dreamcatcher section.mobile-ready hr.dotted { 
  width: 100%; height: 1px;
  background: transparent url(../images/dreamcatcher/p-dotted-light-grey-bg.png) repeat-x; }
article.dreamcatcher section.desktop hr.dotted { 
  width: 100%; height: 1px;
  background: transparent url(../images/dreamcatcher/p-dotted-dark-grey-bg.png) repeat-x; }

article.dreamcatcher section.desktop section.audio-post { padding: 160px 0 80px; }
article.dreamcatcher section.desktop section.milestones { padding: 160px 0 80px; }
article.dreamcatcher section.desktop section.charts { padding: 160px 0 140px; }
article.dreamcatcher section.desktop section.audio-post img { float: right; }
article.dreamcatcher section.desktop section.milestones img { margin-bottom: 5px; }
article.dreamcatcher section.desktop {
  background: #1a1924; color: #474557;
  position: relative; z-index: 400;
  padding: 160px 0 0; }


article.dreamcatcher section.mobile-ready {
  position: relative; z-index: 300;
  background: #f3f2f7; color: #938fab;
  padding: 160px 0 0; }
article.dreamcatcher section.desktop h2.final-design { color: #5b318c; }
article.dreamcatcher section.desktop h2.final-design span { color: #fff; }
article.dreamcatcher section.final-design.end section.slider { padding: 30px 0 0; }
article.dreamcatcher section.desktop section.final-design { padding: 80px 0 0; }
article.dreamcatcher section.desktop section.final-design section.slider > div {
  background: linear-gradient(to right, rgba(33,31,43,.87) -80px, rgba(49,41,56,.87) 100%), url(../images/dreamcatcher/noise2.png); }
article.dreamcatcher section.desktop section.final-design section.slider > div ul { background: #23222b url(../images/browser-toolbar.png) no-repeat; }
article.dreamcatcher section.desktop section.final-design section.slider nav ul li {
  border-color: #474557;
  background: rgba(71, 69, 87, 0.3); }

article.dreamcatcher section.mobile-ready ul { margin: 160px auto 0; }
article.dreamcatcher section.mobile-ready ul li { margin-bottom: 80px; }
article.dreamcatcher section.mobile-ready .third--one { padding-right: 10px; width: auto; }
article.dreamcatcher section.mobile-ready .third--two { padding: 0 10px; width: auto; }
article.dreamcatcher section.mobile-ready .third--three { padding-left: 10px; width: auto; }


article.dreamcatcher section.desktop section.audio-post img  { opacity: 0; transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.dreamcatcher section.desktop section.audio-post.animate img { opacity: 1; }

article.dreamcatcher section.desktop section.milestones { min-height: 410px; }
article.dreamcatcher section.desktop section.milestones img:nth-of-type(1) { 
  opacity: 0; 
  transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.dreamcatcher section.desktop section.milestones img:nth-of-type(2),
article.dreamcatcher section.desktop section.milestones img:nth-of-type(3) { 
  position: absolute; 
  opacity: 0;
  top: 0; left: 0;
  transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
              top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } 
article.dreamcatcher section.desktop section.milestones.animate img { opacity: 1; }
article.dreamcatcher section.desktop section.milestones.animate img:nth-of-type(1) { z-index: 3; }
article.dreamcatcher section.desktop section.milestones.animate img:nth-of-type(2) { top: 135px; z-index: 2; }
article.dreamcatcher section.desktop section.milestones.animate img:nth-of-type(3) { top: 270px; z-index: 1; }

article.dreamcatcher section.mobile-ready ul li img,
article.dreamcatcher section.desktop section.charts img {
  -webkit-transform: rotateY(25deg);
     -moz-transform: rotateY(25deg);
          transform: rotateY(25deg);
  opacity: 0;
  transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -moz-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.dreamcatcher section.mobile-ready.animate ul li img,
article.dreamcatcher section.desktop section.charts.animate img { 
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
  opacity: 1;
  transition-delay: 0s; }


article.dreamcatcher section.mobile-ready.animate ul li:nth-child(2) img,
article.dreamcatcher section.desktop section.charts.animate img:nth-of-type(2) { transition-delay: 0.2s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(3) img,
article.dreamcatcher section.desktop section.charts.animate img:nth-of-type(3) { transition-delay: 0.4s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(4) img,
article.dreamcatcher section.desktop section.charts.animate img:nth-of-type(4) { transition-delay: 0.6s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(5) img { transition-delay: 0.8s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(6) img { transition-delay: 1.0s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(7) img { transition-delay: 1.2s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(8) img { transition-delay: 1.4s; }
article.dreamcatcher section.mobile-ready.animate ul li:nth-child(9) img { transition-delay: 1.6s; }




article.dreamcatcher footer.thanks { 
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07); 
  background: #f3f2f7; 
  padding: 120px 0 230px; }
article.dreamcatcher footer.thanks h2 { color: #a268e6; }
/* @end of Dreamcatcher */


/*******************/
/* @group Nike     */
/* blue [#f9650f]; */
/*******************/
div#wrapper section#main article.nike { }
article.nike header.introduction { 
  min-height: 1200px;
  color: #fff;
  background: linear-gradient(to right, rgba(255,98,26,.94) -80px, rgba(255,56,26,.94) 100%), url(../images/nike/noise.png);  }
article.nike hr.dotted { 
  height: 1px; width: 100%;
  background: url(../images/nike/p-dotted-dark-grey-bg.png); }
article.nike header.introduction h1 { margin: 360px 0 260px; min-height: 222px; }
article.nike header.introduction h2 { color: #ff9142; padding: 0 0 50px; }
article.nike header.introduction ul.meta { border-bottom: 1px solid rgba(255, 138, 53, 0.4);}
article.nike header.introduction ul.meta li h3 { color: #fdc08a; }
article.nike header.introduction div.arrow { background: transparent url(../images/nike/arrow.png) no-repeat; }
article.nike section.brief {
  min-height: 1160px;
  padding: 160px 0;
  background: #f5f5f5; color: #7f7f7f; }
article.nike section.brief h2.default { color: #ff5500; }
article.nike section.final-design h2.default { color: #fff; }
article.nike section.final-design h2.default span { color: #cc3a00; }
article.nike section.brief h2.default span { color: #4c4c4c; }
article.nike section.final-design h3 { color: #cc3a00; }
article.nike section.final-design h3 > span { color: #fff; }
article.nike section.brief p.introduction { 
  background: url(../images/nike/p-dotted-light-grey-bg.png) repeat left 40px; 
  color: #7f7f7f; }
article.nike section.final-design p.introduction { 
  background: url(../images/nike/p-dotted-dark-grey-bg.png) repeat left 40px; 
  color: #555; }
article.nike section.brief img.iso {
  position: relative;
  margin: 60px auto;
  display: block; }

article.nike section.final-design {
  position: relative; z-index: 200;
  padding: 160px 0 0;
  background: #0f0f0f; color: #555; }

article.nike section.final-design section.chapters { padding: 160px 0 80px; }
article.nike section.final-design section.all-about-you { padding: 160px 0 20px; }
article.nike section.final-design section.sports-data { padding: 160px 0 80px; }
article.nike section.final-design section.best-shoes { padding: 160px 0 60px; }
article.nike section.final-design section.your-diary { padding: 160px 0 190px; }
article.nike section.final-design section.chapters img,
article.nike section.final-design section.sports-data img,
article.nike section.final-design section.your-diary img { float: right; }

article.nike section.final-design section.chapters img,
article.nike section.final-design section.all-about-you img,
article.nike section.final-design section.sports-data img,
article.nike section.final-design section.best-shoes img,
article.nike section.final-design section.your-diary img { opacity: 0; transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); }
article.nike section.final-design section.all-about-you.animate img,
article.nike section.final-design section.chapters.animate img,
article.nike section.final-design section.sports-data.animate img,
article.nike section.final-design section.best-shoes.animate img,
article.nike section.final-design section.your-diary.animate img { opacity: 1; }



article.nike section.final-design h2.final-design { color: #cc3a00; }
article.nike section.final-design h2.final-design span { color: #fff; }
article.nike section.final-design section.slider > div {
  background: linear-gradient(to right, rgba(255,98,26,.94) -80px, rgba(255,56,26,.94) 100%), url(../images/nike/noise.png); }
article.nike section.final-design section.slider > div ul { background: #000 url(../images/browser-toolbar.png) no-repeat; }
article.nike section.final-design section.slider nav ul li{
  border-color: #cc3a00;
  background: rgba(204, 58, 0, 0.3); }
article.nike section.final-design.end section.slider { padding: 20px 0 0; }
article.nike section.final-design.end section.slider > ul { box-shadow: none; }
article.nike footer.thanks { 
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); 
  padding: 250px 0;
  background: linear-gradient(to right, rgba(255,98,26,.94) -80px, rgba(255,56,26,.94) 100%), url(../images/nike/noise.png); }
article.nike footer.thanks h2 { color: #fe8a34; }
/* @end of Nike */


/* @end of Projects */
/* @end of Main */


@media screen and (max-width: 640px){
  div#mobile {
    display: block;
    z-index: 999999;
    opacity: 1;
    transition: opacity 0.3s ease-out;
  }
  div#mobile svg {
    position: absolute;
    margin: auto;
    bottom: 0; left: 0; top: 0; right: 0; }
  div#wrapper { display: none; }
}
/* @end of Master */