html {
	margin: 0;
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale;
}

.left {
	float: left;
}

.right {
	float: right;
}

ul.nav li {
	display: inline-block;
	list-style: none;
}

.project-page .work .swipe, .project-page .work .swipeshadow, .project-page section.work .project .logomobile {
	display: none;
}


.project-page .iphone img {
	align-self: center;
	height: 100%;
}

.project-page section.intro {
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
    display: block;
    background: #f6f6f6;
    position: relative;
}

.project-page section.intro .row {
	position: relative;
	height: 100%;
}

.project-page section.intro .intro-wrap {
	height: 100%;
}

.project-page section.intro .content {
  height: 100%;
  width: 100%;
  display: block;
}


/*.project-page section.intro .content .arrow-ball {
	position: absolute;
	bottom: 100px;
	right: 20px;
	-webkit-animation: arrow-ball 4s ease-in-out 1.5s forwards infinite;
	animation: arrow-ball 4s ease-in-out 1.5s forwards infinite;
	visibility: hidden;
  }
  
  /* Safari 4.0 - 8.0 *!/
  @-webkit-keyframes arrow-ball {
      0%   {width: 20px; height: 20px; opacity:0; visibility: hidden;}
      2% {width: 15px; height: 15px; opacity:1; transform: translateY(0px); visibility: visible;}
      25% {width: 15px; height: 15px; transform: translateY(-50px); opacity: 0;
        visibility: visible;}
      100% {width: 15px; height: 15px; transform: translateY(-50px); opacity: 0;
        visibility: visible;}
  }
  
  /* Standard syntax *!/
  @keyframes arrow-ball {
      0%   {width: 20px; height: 20px; opacity:0; visibility: hidden;}
      2% {width: 15px; height: 15px; opacity:1; transform: translateY(0px); visibility: visible;}
      25% {width: 15px; height: 15px; transform: translateY(-100px); opacity: 0;
        visibility: visible;}
      100% {width: 15px; height: 15px; transform: translateY(-100px); opacity: 0;
        visibility: visible;}
  }
  
 	.project-page section.intro .content .arrowshadow {
    width: 15px;
    height: 15px;
    display: block;
    background: #E1E1E1;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    position: absolute;
    bottom: 104px;
    right: 20px;
    margin: auto;
    -webkit-animation: swipeshadow 4s ease-in-out 1.5s forwards infinite;
    animation: swipeshadow 4s ease-in-out 1.5s forwards infinite;
    visibility: hidden;
  }
  
  @-webkit-keyframes swipeshadow {
      0%   {width: 15px; height: 15px; bottom: 104px; right: 20px; opacity:0; visibility: hidden;}
      1% {width: 15px; height: 15px; bottom: 104px; right: 20px; opacity:1; visibility: visible;}
      5% {width: 41px; height: 41px; bottom: 90px; right: 7px; opacity:0; visibility: visible;}
      100% {opacity: 0;}
  }
  
  @keyframes swipeshadow {
      0%   {width: 15px; height: 15px; bottom: 104px; right: 20px; opacity:0; visibility: hidden;}
      1% {width: 15px; height: 15px; bottom: 104px; right: 20px; opacity:1; visibility: visible;}
      5% {width: 41px; height: 41px; bottom: 90px; right: 7px; opacity:0; visibility: visible;}
      100% {opacity: 0;}
  }*/















.project-page section.intro .content .arrow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -10px;
  opacity: 0.2;
  -webkit-animation: arrow 1.5s infinite; /* Safari 4+ */
  -moz-animation:    arrow 1.5s infinite; /* Fx 5+ */
  -o-animation:      arrow 1.5s infinite; /* Opera 12+ */
  animation:         arrow 1.5s infinite; /* IE 10+ */
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  width: 21px;
  height: 15px;
  background: url('../images/arrow.png') no-repeat left top;
}

@-webkit-keyframes arrow {
	0% { bottom: 30px;}
	50% { bottom: 40px;}
	100% { bottom: 30px;}
}

@keyframes arrow {
	0% { bottom: 30px;}
	50% { bottom: 40px;}
	100% { bottom: 30px;}
}

.project-page section.introscroll .content .arrow {
  opacity: 0;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

/*.project-page section.intro .content .textbox {
	padding-top: 165px;
  width: 410px;
  display: block;
  text-align: center;
  margin: auto;
  position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
  line-height: 25px;
  letter-spacing: 4px;
  color: black;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}*/

/*.project-page section.intro .content .textbox {
	padding-top: 165px;
  width: 615px;
  display: block;
  text-align: left;
  margin: auto;
  position: absolute;
  left: 20px;
	bottom: 100px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}*/

.project-page section.intro .content .textbox {
	padding-top: 115px;
  width: 615px;
  display: block;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


.project-page section.introscroll .content .textbox {
  opacity: 0;
  -webkit-transition: all 1.0s ease;
  -moz-transition: all 1.0s ease;
  -ms-transition: all 1.0s ease;
  -o-transition: all 1.0s ease;
  transition: all 1.0s ease;
}

@-webkit-keyframes textboxfade {
    0%   {opacity:0; transform: translateY(40px);}
    100% {opacity:1; transform: translateY(0px);}
}

/* Standard syntax */
@keyframes textboxfade {
    0%   {opacity:0; transform: translateY(40px);}
    100% {opacity:1; transform: translateY(0px);}
}

.project-page section.intro .content .textbox span {
	margin-bottom: 20px;
	display: block;
  /*width: 40px;
  height: 40px;
  display: block;
  background: url('../images/one.png') no-repeat center center;
  margin: 0 auto 30px;*/
}

.project-page section.intro .content .textbox p {
  margin: 0;
	opacity: 0;
}

.project-page section.intro .content .textbox h1 {
	font-size: 11px;
	margin-bottom: 0;
	line-height: 25px;
	letter-spacing: 4px;
	color: black;
	font-weight: 700;
	margin: 0;
	-webkit-animation: textboxfade 1s ease forwards;
	       -moz-animation: textboxfade 1s ease forwards;
	         -o-animation: textboxfade 1s ease forwards;
	            animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .10s;
	-moz-animation-delay: .10s;
	-o-animation-delay: .10s;
	animation-delay: .10s;
}

.project-page section.intro .content .textbox h2 {
	font-size: 9px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 3px;
	color: #9B9B9B;
	margin-top: 0px;
	margin-bottom: 40px;
	-webkit-animation: textboxfade 1s ease forwards;
	       -moz-animation: textboxfade 1s ease forwards;
	         -o-animation: textboxfade 1s ease forwards;
	            animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .10s;
	-moz-animation-delay: .10s;
	-o-animation-delay: .10s;
	animation-delay: .10s;
}

.project-page section.intro .content .textbox p.tags {
	font-size: 9px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 3px;
	color: #9B9B9B;
	margin-top: 40px;
	
	-webkit-animation: textboxfade 1s ease forwards;
	       -moz-animation: textboxfade 1s ease forwards;
	         -o-animation: textboxfade 1s ease forwards;
	            animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .30s;
	-moz-animation-delay: .30s;
	-o-animation-delay: .30s;
	animation-delay: .30s;
}

.project-page section.intro .content .textbox p.tags span {
	padding: 1px 10px;
	background: #EEE;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	display: inline-block;
	margin-right: 5px;
}

.project-page section.intro .content .textbox p.tags span:last-child {
	margin: 0;
}

.project-page section.intro .content .textbox p.description {
	letter-spacing: 3px;
	font-size: 9px;
	line-height: 25px;
	font-weight: 500;
	color: #9B9B9B;
	-webkit-animation: textboxfade 1s ease forwards;
	       -moz-animation: textboxfade 1s ease forwards;
	         -o-animation: textboxfade 1s ease forwards;
	            animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .20s;
	-moz-animation-delay: .20s;
	-o-animation-delay: .20s;
	animation-delay: .20s;
}

.project-page section.logo {
  width: 100%;
  height: 1000px;
  display: block;
}

.project-page section.logo .content {
  width: 100%;
  height: 100%;
  position: relative;
}

.project-page section.logo .content img {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


.project-page section#logo-versions {
  width: 100%;
  display: block;
}

.project-page section#logo-versions .wrap {
  display: table;
  width: 100%;
}

.project-page section#logo-versions .content {
  display: table-cell;
  vertical-align: middle;
}

.project-page section#logo-versions .content .left img, .project-page section#logo-versions .content .right img {
  vertical-align: middle;
}

.project-page section#logo-versions .content .right, .project-page section#logo-versions .content .left  {
  width: 50%;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.project-page section#logo-versions .content .right img, .project-page section#logo-versions .content .left img {
  text-align: center;
}

.project-page section.id-composition {
  display: block;
	background: #f6f6f6;
	padding-top: 150px;
}

.project-page section.id-composition img {
	margin: 0 auto;
	display: block;
}

.project-page section#composition .zoom {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.project-page section#composition .zoom a {
  width: 100px;
  display: block;
  text-align: center;
	margin-right: auto;
	margin-left: auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
	padding: 20px;
}

.project-page section#composition .zoom a img {
	width: 30px;
}

.project-page section#composition .zoom a:hover {
  opacity: 0.3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.project-page section#font {
  /*height: 800px;*/
  display: block;
  background-color: #f6f6f6;
  /*background: url('../images/llbrownfont.png') center 10px no-repeat #f6f6f6;*/
}

.project-page section#font .left, .project-page section#font .right {
  width: 50%;
  margin-top: 150px;
	margin-bottom: 150px;
}

.project-page section#font .left img {
  text-align: right;
  float: right;
  display: block;
  width: 70%;
  margin-right: 50px;
}

.project-page section#font .right img {
  text-align: right;
  float: left;
  display: block;
  width: 70%;
  margin-left: 50px;
}






/*** RELATED PROJECT ***/


.project-page section.related-project {
  width: 100%;
  display: block;
	position: relative;
}

.project-page section.related-project .content {
	width: 100%;
	max-width: 1000px;
	padding-top: 150px;
	padding-bottom: 140px;
	display: block;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
	text-align: center;
}

.project-page.two-one section.related-project .content a {
	display: block;
}

/*.project-page.two-one section.related-project .content img {
	-webkit-animation: relatedproject 2s infinite;
	-moz-animation:    relatedproject 2s infinite;
	-o-animation:      relatedproject 2s infinite; 
	animation:         relatedproject 2s infinite;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;  
}


@-webkit-keyframes relatedproject {
	0% { transform: translateY(0px);}
	50% { transform: translateY(20px);}
	100% { transform: translateY(0px);}
}

@keyframes relatedproject {
	0% { transform: translateY(0px);}
	50% { transform: translateY(20px);}
	100% { transform: translateY(0px);}
}*/


.project-page section.related-project .content p {
	line-height: 25px;
	letter-spacing: 4px;
	-webkit-transition: all 0.5s ease;
	         -moz-transition: all 0.5s ease;
	           -o-transition: all 0.5s ease;
	          -ms-transition: all 0.5s ease;
	              transition: all 0.5s ease; 
}


.project-page section.related-project .content p.title {
	color: black;
	font-size: 9px;
	color: white;
	background: #0000FF;
	padding: 5px 10px;
	width: 200px;
	margin: 0 auto;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px;
}

.project-page section.related-project .content p.project-name {
	color: black;
	-webkit-transition: all 0.5s ease;
	         -moz-transition: all 0.5s ease;
	           -o-transition: all 0.5s ease;
	          -ms-transition: all 0.5s ease;
	              transition: all 0.5s ease; 
}

.project-page section.related-project .content p.description {
	color: #929292;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-transform: uppercase;
	width: 300px;
	margin: 0 auto;
	-webkit-transition: all 0.5s ease;
	         -moz-transition: all 0.5s ease;
	           -o-transition: all 0.5s ease;
	          -ms-transition: all 0.5s ease;
	              transition: all 0.5s ease; 
}


.project-page section.related-project .content p.btn {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-transform: uppercase;
	color: #0000FF;
	display: block;
	/*opacity: 0;
	margin-top: -20px;*/
	margin-top: 10px;
}

.project-page section.related-project .content .text {
	width: 320px;
	margin: 0 auto;
}

.project-page section.related-project .content .text:hover p.description  {
	-webkit-transition: all 0.5s ease;
	         -moz-transition: all 0.5s ease;
	           -o-transition: all 0.5s ease;
	          -ms-transition: all 0.5s ease;
	              transition: all 0.5s ease; 
opacity: 0.5;
}

.project-page section.related-project .content .text:hover p.project-name {
	-webkit-transition: all 0.5s ease;
	         -moz-transition: all 0.5s ease;
	           -o-transition: all 0.5s ease;
	          -ms-transition: all 0.5s ease;
	              transition: all 0.5s ease; 
transform: translateY(-10px);
}

.project-page section.related-project .content .text:hover p.btn {
	-webkit-transition: all 0.5s ease;
	         -moz-transition: all 0.5s ease;
	           -o-transition: all 0.5s ease;
	          -ms-transition: all 0.5s ease;
	              transition: all 0.5s ease; 
transform: translateY(10px);
}






/*** WORK ***/


.project-page section.work {
	padding-top: 150px;
	padding-bottom: 100px;
}

.project-page section.work .project {
	visibility: visible;
}

.project-page section.related-project .separator {
	display: block;
	width: 30px;
	height: 2px;
	background: #CCCCCC;
	margin-right: auto;
	margin-left: auto;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}



/*** FOOTER ***/

.project-page footer .content {
  display: block;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  width: 100%;
  text-align: center;
}

.project-page footer .content a {
  color: black;
  display: block;
  padding: 20px 50px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  
}

.project-page footer .content a:hover {
  opacity: 0.5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


.project-page span.end {
	width: 20px;
	height: 20px;
	display: block;
	background: #0000FF;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	margin: 0 auto;
	margin-top: -10px;
	z-index: 1000;
	position: relative;
}












/************************** BY PROJECT ****************************/


/** WODER IDENTITY **/




.project-page.woder-identity section.intro .content .textbox {
  height: 280px;
}

.project-page.woder-identity section.logo .content img {
    width: 50%;
}

body.woder-identity section#icon {
    min-height: 900px;
    position: relative;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.woder-identity #icon>div:nth-of-type(1) {
    background: url(../images/woder-identity/bg6.jpg) 50% 0 repeat fixed;
    margin: 0;
    height: 900px;
    position:absolute;
    width:100%;
    top:0;left:0;
    /*-webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;*/
}


body.woder-identity section#icon .parallax .content {
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 100%;
}

body.woder-identity section#icon .parallax .content img {
  margin-top: 350px;
  width: 300px;
}

.project-page.woder-identity section#logo-versions, .project-page.woder-identity section#logo-versions .wrap {
  height: 700px;
}

.project-page.woder-identity section#logo-versions .content .left img {
  width: 350px;
}

.project-page.woder-identity section#logo-versions .content .left img {
  margin-top: 13px;
}

.project-page.woder-identity section#logo-versions .content .right img {
  width: 100px;
}

.project-page.woder-identity section.related-project .content .text {
	margin-top: -20px;
}






/*** WANDLE CO. ***/



.project-page.wandle-identity section.intro .content .textbox {
  height: 250px;
}

.project-page.wandle-identity section.logo .content img {
    width: 50%;
}


.project-page.wandle-identity section#flowing {
    min-height: 1000px;
    position: relative;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.project-page.wandle-identity section.flowing-mobile {
  display: none;
  width: 100%;
  background: url('../images/wandle-identity/mountain-blur.jpg') no-repeat center center;
  height: 600px;
  position: relative;
	background-size: 1000px;
}

.project-page.wandle-identity section.flowing-mobile .content {
  display: block;
  width: 100%;
  height: 306px;
  background: url('../images/wandle-identity/flowing-mobile.png') no-repeat center center;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#flowing>div:nth-of-type(1) {
    background: url(../images/wandle-identity/mountain-blur-quality2.jpg) 50% 0 repeat;
    margin: 0;
    height: 1000px;
    position:absolute;
    width:100%;
    top:0;left:0;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

#flowing>div:nth-of-type(2) {
    background: url(../images/wandle-identity/flow1.png) 50% 0 no-repeat;
    margin: 0;
    height: 1000px;
    position:absolute;
    top:0px;left:-50px;
    width:100%;
}


#flowing>div:nth-of-type(3) {
    background: url(../images/wandle-identity/flow2.png) 50% 0 no-repeat;
    margin: 0;
    height: 1000px;
    position:absolute;
    top:0px;left:-20px;
    width:100%;
}

#flowing>div:nth-of-type(4) {
    background: url(../images/wandle-identity/flow3.png) 50% 0 no-repeat;
    margin: 0;
    height: 1000px;
    position:absolute;
    top:0px;left:10px;
    width:100%;
}

.project-page.wandle-identity section#logo-versions .wrap {
	height: 700px;
}


.project-page.wandle-identity section#logo-versions .content .left img {
  width: 400px;
}

.project-page.wandle-identity section#logo-versions .content .right img {
	width: 190px;
	margin-top: -25px;
}

.project-page.wandle-identity section.id-composition img {
	width: 1425px;
}

.project-page.wandle-identity section#font img {
	max-width: 750px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 140px;
	padding-top: 60px;
}





/*** MELLOW IDENTITY ***/


.project-page.mellow-identity section.intro .content .textbox {
  height: 300px;
}


.project-page.mellow-identity section.logo .content img {
		max-width: 250px;
}

.project-page.mellow-identity .id-sketches {
	height: 100%;
	display: block;
	background: #f6f6f6;
}

.project-page.mellow-identity .id-sketches .row {
	height: 100%;
}

/*.project-page.mellow-identity .id-sketches .wrap {
	width: 1060px;
	margin: 0 auto;
	height: 100%;
	display: block;
}*/

.project-page.mellow-identity .id-sketches .content {
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 100%;
	position: relative;
}


.project-page.mellow-identity .id-sketches img {
	position: absolute;
}

.project-page.mellow-identity .id-sketches img.main {
	height: 300px;
	top: 50%;
	transform: translateY(-50%);
}

/*.project-page.mellow-identity .id-sketches.sketchesfade img.main {
	-webkit-animation: sketchfade 1s ease-in-out forwards;
	       -moz-animation: sketchfade 1s ease-in-out forwards;
	         -o-animation: sketchfade 1s ease-in-out forwards;
	            animation: sketchfade 1s ease-in-out forwards;
}*/

.project-page.mellow-identity .id-sketches img.one, .project-page.mellow-identity .id-sketches.sketchesfade img.one, .project-page.mellow-identity .id-sketches img.two, .project-page.mellow-identity .id-sketches.sketchesfade img.two, .project-page.mellow-identity .id-sketches img.three, .project-page.mellow-identity .id-sketches.sketchesfade img.three, .project-page.mellow-identity .id-sketches img.four, .project-page.mellow-identity .id-sketches.sketchesfade img.four, .project-page.mellow-identity .id-sketches img.five, .project-page.mellow-identity .id-sketches.sketchesfade img.five, .project-page.mellow-identity .id-sketches img.six, .project-page.mellow-identity .id-sketches.sketchesfade img.six, .project-page.mellow-identity .id-sketches img.seven, .project-page.mellow-identity .id-sketches.sketchesfade img.seven, .project-page.mellow-identity .id-sketches img.eight, .project-page.mellow-identity .id-sketches.sketchesfade img.eight, .project-page.mellow-identity .id-sketches img.nine, .project-page.mellow-identity .id-sketches.sketchesfade img.nine, .project-page.mellow-identity .id-sketches img.hardware, .project-page.mellow-identity .id-sketches.sketchesfade img.hardware {
	-webkit-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}



.project-page.mellow-identity .id-sketches img.one {
	left: 30px;
	margin-top: 90px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.one {
	left: -30px;
}

.project-page.mellow-identity .id-sketches img.two {
	left: 140px;
	margin-top: 20px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.two {
	left: 110px;
}

.project-page.mellow-identity .id-sketches img.three {
	left: 350px;
	margin-top: 120px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.three {
	left: 323px;
}

.project-page.mellow-identity .id-sketches img.four {
	left: 300px;
	margin-top: -90px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.four {
	left: 285px;
}

.project-page.mellow-identity .id-sketches img.five, .project-page.mellow-identity .id-sketches.sketchesfade img.five {
	left: 500px;
}

.project-page.mellow-identity .id-sketches img.six {
	left: 620px;
	margin-top: 140px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.six {
	left: 656px;
}

.project-page.mellow-identity .id-sketches img.seven {
	left: 685px;
	margin-top: -130px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.seven {
	left: 705px;
}

.project-page.mellow-identity .id-sketches img.eight {
	left: 815px;
	margin-top: 20px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.eight {
	left: 845px;
}

.project-page.mellow-identity .id-sketches img.nine {
	right: 70px;
	margin-top: 50px;
}

.project-page.mellow-identity .id-sketches.sketchesfade img.nine {
	right: 30px;
}



.project-page.mellow-identity .id-sketches img.hardware, .project-page.mellow-identity .id-sketches.sketchesfade img.hardware {
	width: 100px;
	left: 585px;
	margin-top: 106px;
}

.project-page.mellow-identity .id-sketches img.details-one {
	width: 400px;
	bottom: -40px;
	left: 0;
}

.project-page.mellow-identity .id-sketches img.details-two {
	right: -30px;
	top: -60px;
	width: 400px;
}


/*@-webkit-keyframes sketchfade {
  0% {
		visibility: visible;
		transform: translateY(-35%);
  }
  100% {
		visibility: visible;
		transform: translateY(-50%);
  }
}

@keyframes sketchfade {
  0% {
  	visibility: visible;
  	transform: translateY(-35%);
  }
  100% {
  	visibility: visible;
  	transform: translateY(-50%);
  }
}*/


/*
.project-page.mellow-identity section.logo.logotype .wrap {
	height: 100%;
	padding: 40px;
}

.project-page.mellow-identity section.logo.logotype .inner {
	width: 100%;
	height: 100%;
	border: 4px solid #C39702;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: url('../images/mellow-identity/mellow-lines.png') no-repeat center center;
}*/


.project-page.mellow-identity section.logo.logotype {
	height: 600px;
	border-bottom: 1px solid #EEE;
}

.project-page.mellow-identity section.logo.logotype img {
	max-width: 400px;
}

.project-page.mellow-identity section#logo-versions {
	
}

.project-page.mellow-identity .logo-versions .left, .project-page.mellow-identity .logo-versions .right {
	padding-top: 250px;
	padding-bottom: 250px;
	position: relative;
}


.project-page.mellow-identity .logo-versions .left img {
	max-width: 250px;
}

.project-page.mellow-identity .logo-versions .right img {
	width: 90px;
	margin-top: -30px;
}

.project-page.mellow-identity .logo-versions .right .divider {
	position: absolute;
	height: 100%;
	display: block;
	width: 1px;
	background: #EEE;
	top: 0;
}

.project-page section.id-composition img.mobileonly {
	display: none;
}

.project-page.mellow-identity section.id-composition img.iphone {
	margin-top: -90px;
}

.project-page.mellow-identity section#font img {
	max-width: 580px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 140px;
	padding-top: 60px;
	margin-top: -260px;
}




/*** MELLOW WEBSITE ***/


.project-page.mellow-website section.intro .content .textbox {
	height: 300px;
}


/*.project-page.mellow-website .website-img-intro .content {
	min-height: 1560px;
	display: block;
	width: 100%;
	background: url('../images/mellow-website/mellow-website-intro.png') no-repeat center -50px;
	background-size: 150%;
	overflow: visible;
}*/


.project-page.mellow-website .website-img-intro .content {
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
	margin-top: 150px;
	z-index: 10;
	overflow: hidden;
	-webkit-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.mellow-website .website-img-intro .content.slideup {
	margin-top: -150px;
	-webkit-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.mellow-website .website-img-intro .content.slideupmore {
	transform: translateY(-40px);
	-webkit-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.mellow-website .website-img-intro .content img {
	width: 100%;
	image-rendering: crisp-edges;
	vertical-align: bottom;
	-webkit-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.mellow-website .pages {
	background: #F6F6F6;
	z-index: 99;
	position: relative;
	/*margin-top: -50px;*/
	padding-top: 150px;
	padding-bottom: 150px;
	overflow: hidden;
	padding-bottom: 400px;
}

.project-page.mellow-website .pages img {
	height: auto;
}

.project-page.mellow-website .pages .content {
	position: relative;
	width: 100%;
	height: 100%;
}

.project-page.mellow-website .pages.slidedown {
	margin-top: 0;
}

.project-page.mellow-website .pages .page-one {
	margin: 0 auto;
	display: block;
	z-index: 10;
	transform: translateX(7px);
}


.project-page.mellow-website .pages .page-two, .project-page.mellow-website .pages .page-three, .project-page.mellow-website .pages .element-one, .project-page.mellow-website .pages .page-four, .project-page.mellow-website .pages .page-five, .project-page.mellow-website .pages .page-six, .project-page.mellow-website .pages .page-seven, .project-page.mellow-website .pages .element-two, .project-page.mellow-website .pages .page-eight, .project-page.mellow-website .pages .element-three {
	/*position: absolute;
	left: 50%;
	transform: translateX(-50%);*/
	margin-left: auto;
	margin-right: auto;
	display: block;
}


.project-page.mellow-website .pages .page-two {
	transform: translateX(-620px);
	margin-top: -430px;
	z-index: 100;
}

.project-page.mellow-website .pages .page-three {
	margin-top: -520px;
	transform: translateX(92px);
	z-index: 100;
}

.project-page.mellow-website .pages .element-one {
	width: 330px;
	height: 310px;
	background: white;
	display: block;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	z-index: 10000;
	text-align: center;
	-webkit-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	transform: translateX(640px);
	margin-top: -490px;
}

.project-page.mellow-website .pages .element-one h1 {
	font-size: 12px;
	letter-spacing: 1.5px;
	color: #C39702;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.project-page.mellow-website .pages .element-one p {
	font-size: 16px;
	line-height: 24px;
	color: #999999;
	font-weight: 400;
	width: 240px;
	margin: 0 auto;
	display: block;
}

.project-page.mellow-website .pages .element-one img {
	margin-top: 60px;
}


.project-page.mellow-website .pages .page-four {
	margin-top: 235px;
	transform: translateX(7px);
}

.project-page.mellow-website .pages .page-five {
	margin-top: -160px;
	transform: translateX(470px);
}

.project-page.mellow-website .pages .page-six {
	margin-top: -585px;
	transform: translateX(-250px);
	z-index: 10;
}

.project-page.mellow-website .pages .element-two {
	width: 300px;
	height: 150px;
	background: white;
	display: block;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	z-index: 10000;
	text-align: center;
	-webkit-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	margin-top: -600px;
	transform: translateX(-700px);
	position: relative;
}

.project-page.mellow-website .pages .element-two img {
	margin: auto;
	display: block;
/*	margin-top: 53px;*/
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.mellow-website .pages .page-seven {
	margin-top: 490px;
	transform: translateX(7px);
	-webkit-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: white;
	width: 1208px;
	overflow: hidden;
	position: relative;
}

.project-page.mellow-website .pages .page-seven .img-back  {
	width: 100%;
}

.project-page.mellow-website .pages .page-seven .shadow {
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0;
	display: block;
	position: absolute;
	z-index: 1;
	-webkit-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-website .pages .page-seven-cart .shadow {
	opacity: 0.2;
}

.project-page.mellow-website .pages .page-seven .cart {
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	right: -375px;
	z-index: 10;
	-webkit-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-website .pages .page-seven-cart .cart {
	right: -5px;
}

.project-page.mellow-website .pages .page-eight {
	width: 767px;
	background: white;
	display: block;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	z-index: 10000;
	text-align: center;
	-webkit-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.15);
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	transform: translateX(-415px);
	margin-top: -150px;
}

.project-page.mellow-website .pages .page-eight .top {
	width: 100%;
}

.project-page.mellow-website .pages .page-eight .precooling {
	width: 80%;
	vertical-align: bottom;
	margin-top: 80px;
}


.project-page.mellow-website .pages .element-three {
	margin-top: -600px;
	transform: translateX(350px);
}


.project-page.mellow-website .composition {
	background: white;
/*	padding-top: 150px;
	padding-bottom: 150px;*/
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #E1E1E1;
	border-top: 1px solid #E1E1E1;
	min-height: 1000px;
}

.project-page.mellow-website .composition img {
	display: block;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.mellow-website .composition .column {
	display: block;
	float: left;
	width: 50%;
	vertical-align: top;
	position: relative;
}

.project-page.mellow-website .composition .column .content {
	position: relative;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-website .composition .column.main-left .content {
	border-right: 1px solid #E1E1E1;
}

.project-page.mellow-website .composition .column.main-left .content:last-child, .project-page.mellow-website .composition .column.main-right .content:last-child {
	border-bottom: none;
}

.project-page.mellow-website .composition .grid-two .left, .project-page.mellow-website .composition .grid-two .right {
	width: 50%;
	position: relative;
	height: 100%;
}

.project-page.mellow-website .composition .grid-two .left span {
	height: 100%;
	width: 1px;
	position: absolute;
	right: 0;
	display: block;
	background: #E1E1E1;
}

.project-page.mellow-website .composition .column .content.info-icons {
	height: 451px;
}

.project-page.mellow-website .composition .column .desc-text, .project-page.mellow-website .composition .column .recipe-info {
	height: 250px;
}

.project-page.mellow-website .composition .column .desc-text {
	display: flex;
	margin: auto; 
}

.project-page.mellow-website .composition .column .desc-text .text {
	color: #999;
	font-size: 17px;
	line-height: 32px;
	width: 460px;
	text-align: center;
	margin: auto; /* Important */ 
	text-align: center; 
/*	height: 124px;*/
}

.project-page.mellow-website .composition .text {
	display: block;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.mellow-website .composition .column .btn {
	height: 180px;
}

.project-page.mellow-website .composition .column .title-text {
	height: 200px;
	display: flex;
	margin: auto; 
}

.project-page.mellow-website .composition .column .title-text .text {
	font-size: 41px;
	color: #C39702;
	text-align: center;
	margin: auto; /* Important */ 
	font-weight: 300;
}



.project-page.mellow-website .composition .column .cart-info, .project-page.mellow-website .composition .column .nav-cart {
	height: 250px;
}

.project-page.mellow-website .composition .column .nav-icons {
	height: 435px;
}


.project-page.mellow-website .composition .column .nav-cart .mobile {
	display: none;
}




/***********************/


/***** MELLOW APP *****/


/***********************/



.project-page.mellow-app .device-tile .device {
	position: relative;
	display: block;
}


.project-page.mellow-app .device-tile .item {
	width: 334px;
	height: 668px;
	/*width: 410px;
	height: 700px;*/
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease; 
}


.project-page.mellow-app .device .hardware {
	width: 334px;
	height: 668px;
	background: url('../images/mellow-app/device-frame.png') no-repeat center center;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.project-page.mellow-app .device .screen {
	width: 291px;
	height: 631px;
	position: absolute;
	top: 19px;
	left: 21px;
	margin: 0;
}


.project-page.mellow-app .device .shadow {
	width: 308px;
	height: 645px;
	position: absolute;
	top: 20px;
	left: 22px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	margin: 0;
}


.project-page.mellow-app .device-tile {
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
}


.project-page.mellow-app .item .screen .wrap {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	overflow: hidden;
}


.project-page.mellow-app section.intro .content .textbox {
	height: 250px;
}

/*.project-page.mellow-app .device-tile .screen-bg {
	position: absolute;
	top: 0;
	left: 0;
}*/

.project-page.mellow-app section.app-img-intro {
	background: #f6f6f6 url('../images/mellow-app/mellow-app-intro-img-5.jpg') no-repeat center center;
	height: 1255px;
	width: 100%;
}

.project-page.mellow-app section.signup-login {
	width: 100%;
	background: white;
	border-top: 1px solid #E1E1E1;
	border-bottom: 1px solid #E1E1E1;
	display: block;
	overflow: hidden;
	position: relative;
}

.project-page.mellow-app .border {
	width: 1px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background: #E1E1E1;
	display: block;
	margin: 0 auto;
}

.project-page.mellow-app section.signup-login .border {
	height: 2000px;
}


.project-page.mellow-app section.signup-login .content {
	float: left;
	width: 100%;
	display: table-cell;
	min-height: 10px;
}

.project-page.mellow-app section.signup-login .signuplogin-welcome {
	background: url('../images/mellow-app/signup-welcome-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.signup-login .screen {
	overflow: hidden;
}

.project-page.mellow-app section.signup-login .screen .middle img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.signup-login .signuplogin-welcome .middle .mellow-logo {
	top: 50px;
}

.project-page.mellow-app section.signup-login .tile_two .screen .middle .mellow-logo {
	transform: translateY(-50px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.signup-login .tile_two.animate .screen .middle .mellow-logo {
	transform: translateY(0px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.signup-login .signuplogin-welcome .middle .btns {
	bottom: 40px;
}

.project-page.mellow-app section.signup-login .tile_two .screen .middle .btns {
	transform: translateY(170px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.signup-login .tile_two.animate .screen .middle .btns {
	transform: translateY(0px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.signup-login .signuplogin-welcome .middle .message-one {
	top: 235px;
}

.project-page.mellow-app section.signup-login .tile_two .middle .message-one {
	opacity: 0;
}


.project-page.mellow-app section.signup-login .tile_two.animate .screen .middle .message-one {
	animation: message-one 10s ease infinite;
}

.project-page.mellow-app section.signup-login .signuplogin-welcome .middle .message-two {
	top: 180px;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_two.animate .screen .middle .message-two {
	animation: message-two 10s ease infinite;
}


/*** MESSAGE ONE ***/

@-webkit-keyframes message-one {
	0% { opacity: 0; transform: translateX(50px); }
	10% { opacity: 1; transform: translateX(0px); }
	40% { opacity: 1; transform: translateX(0px); }
	50% { opacity: 0; transform: translateX(-50px); }
	100% { opacity: 0; transform: translateX(0px);}
}

@keyframes message-one {
	0% { opacity: 0; transform: translateX(50px); }
	10% { opacity: 1; transform: translateX(0px); }
	40% { opacity: 1; transform: translateX(0px); }
	50% { opacity: 0; transform: translateX(-50px); }
	100% { opacity: 0; transform: translateX(0px);}
}

/*** MESSAGE TWO ***/

@-webkit-keyframes message-two {
	0% { opacity: 0; transform: translateX(50px);}
	50% { opacity: 0; transform: translateX(50px);}
	60% { opacity: 1; transform: translateX(0px);}
	90% { opacity: 1; transform: translateX(0px);}
	100% { opacity: 0; transform: translateX(-50px);}
}

@keyframes message-two {
	0% { opacity: 0; transform: translateX(50px);}
	50% { opacity: 0; transform: translateX(50px);}
	60% { opacity: 1; transform: translateX(0px);}
	90% { opacity: 1; transform: translateX(0px);}
	100% { opacity: 0; transform: translateX(-50px);}
}



.project-page.mellow-app section.signup-login .signuplogin-login {
	background: url('../images/mellow-app/signup-login-bg.jpg') no-repeat center center;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login {
	animation: fade-in 1s ease forwards;
	animation-delay: 0.5s;
}

.project-page.mellow-app section.signup-login .signuplogin-login .middle .mellow-logo {
	top: 50px;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login .middle .mellow-logo {
	animation: login-slide-down 0.8s ease forwards;
	animation-delay: 1.3s;
}

.project-page.mellow-app section.signup-login .signuplogin-login .middle .mellow-logo-desc {
	top: 70px;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login .middle .mellow-logo-desc {
	animation: login-slide-down 0.8s ease forwards;
	animation-delay: 1.6s;
}

.project-page.mellow-app section.signup-login .signuplogin-login .middle .arrow {
	top: 49px;
	left: 15px;
	right: unset;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login .middle .arrow {
	animation: login-slide-down 0.8s ease forwards;
	animation-delay: 1.9s;
}

.project-page.mellow-app section.signup-login .signuplogin-login .middle .login-btn {
	bottom: 30px;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login .middle .login-btn {
	animation: login-slide-up 0.8s ease forwards;
	animation-delay: 1.9s;
}

.project-page.mellow-app section.signup-login .signuplogin-login .middle .fields {
	bottom: 100px;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login .middle .fields {
	animation: login-slide-up 0.8s ease forwards;
	animation-delay: 1.6s;
}

.project-page.mellow-app section.signup-login .signuplogin-login .middle .fb-btn {
	bottom: 240px;
	opacity: 0;
}

.project-page.mellow-app section.signup-login .tile_three.animate .signuplogin-login .middle .fb-btn {
	animation: login-slide-up 0.8s ease forwards;
	animation-delay: 1.3s;
}



/*** SLIDE UP ***/

@-webkit-keyframes login-slide-up {
	0% { opacity: 0; transform: translateY(30px);}
	100% { opacity: 1; transform: translateY(0px);}
}

@keyframes login-slide-up {
	0% { opacity: 0; transform: translateY(30px);}
	100% { opacity: 1; transform: translateY(0px);}
}


/*** SLIDE DOWN ***/

@-webkit-keyframes login-slide-down {
	0% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 1; transform: translateY(0px);}
}

@keyframes login-slide-down {
	0% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 1; transform: translateY(0px);}
}



.project-page.mellow-app .grid-two {
	float: left;
	width: 50%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	display: flex;
}

.project-page.mellow-app .grid-two.iphone img {
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
}

.project-page.mellow-app section.signup-login .grid-two.tile_one {
	height: 420px;
	vertical-align: middle;
	display: flex;
	margin: auto;
	position: relative;
	border-bottom: 1px solid #E1E1E1;
}

/*.project-page.mellow-app section.signup-login .wrap {
	width: 100%;
	height: 100%;
	display: flex;
	border-right: 1px solid #E1E1E1;
}*/


.project-page.mellow-app .title h2 {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #C39702;
	font-size: 12px;
	text-align: center;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.mellow-app section.signup-login .tile_two {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.signup-login .tile_three {
	margin-top: -488px;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.signup-login .tile_four {
	height: 895px;
	overflow: hidden;
}

.project-page.mellow-app section.signup-login .tile_four .wrap {
	width: 100%;
	height: 100%;
	display: block;
	background: url('../images/mellow-app/signinsignup-all.jpg') no-repeat center center;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	transform: translateY(50px);
}

.project-page.mellow-app section.signup-login .tile_four.animate .wrap {
	transform: translateY(0px);
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.mellow-app section.signup-login .tile_five {
	margin-top: -475px;
	display: flex;
	height: 475px;
}


.project-page.mellow-app section.signup-login .tile_five img {
margin: 0 auto;
width: 87px;
}

.project-page.mellow-app .grid-wrap {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	border-bottom: 1px solid #E1E1E1;
}



/******************************************** PAIRING ********************************************/


.project-page.mellow-app section.pairing {
	background: white;
}

.project-page.mellow-app section.pairing .title {
	display: flex;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.pairing .title-pairing {
	height: 330px;
}

.project-page.mellow-app section.pairing .title.tile_seven {
	height: 490px;
}

.project-page.mellow-app section.pairing .tile_one .middle {
	
}


.project-page.mellow-app section.pairing .tile_three .middle img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_three .middle img.wifi-icon {
	top: 90px;
}

.project-page.mellow-app section.pairing .tile_three .middle img.wifi-text {
	top: 195px;
}

.project-page.mellow-app section.pairing .tile_three .middle img.wifi-fields {
	top: 350px;
}

.project-page.mellow-app section.pairing .tile_three.animate .welcome .bottom .bottom-btn {
	animation: pairing-slide-down 0.5s ease forwards;
}

.project-page.mellow-app section.pairing .tile_three.animate .middle img.wifi-icon {
	animation: pairing-slide-up 1s ease forwards;
	animation-delay: 1s;
}

.project-page.mellow-app section.pairing .tile_three.animate .middle img.wifi-text {
	animation: pairing-slide-up 1s ease forwards;
	animation-delay: 1.3s;
}

.project-page.mellow-app section.pairing .tile_three.animate .middle img.wifi-fields {
	animation: pairing-slide-up 1s ease forwards;
	animation-delay: 1.5s;
}

.project-page.mellow-app section.pairing .tile_three.animate .screen-wifi .bottom-next {
	opacity: 0;
	transform: translateY(50px);
}

.project-page.mellow-app section.pairing .tile_three.animate .screen-wifi .bottom-next {
	animation: pairing-slide-up 1s ease forwards;
	animation-delay: 1.8s;
}

.project-page.mellow-app section.pairing .tile_three .screen-wifi .screen-img {
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_three.animate .screen-wifi .screen-img {
	animation: fade-in 1s ease forwards;
	animation-delay: 0.5;
}


/*** WIFI FADE IN SLIDE UP ***/

@-webkit-keyframes pairing-slide-up {
	0% { transform: translateY(50px); opacity: 0; }
	100% { transform: translateY(0px); opacity: 1; }
}

@keyframes pairing-slide-up {
	0% { transform: translateY(50px); opacity: 0; }
	100% { transform: translateY(0px); opacity: 1; }
}

/*** WIFI FADE IN SLIDE DOWN ***/

@-webkit-keyframes pairing-slide-down {
	0% { transform: translateY(0px); opacity: 0; }
	100% { transform: translateY(50px); opacity: 1; }
}

@keyframes pairing-slide-down {
	0% { transform: translateY(0px); opacity: 0; }
	100% { transform: translateY(50px); opacity: 1; }
}

/*** BG FADE IN ***/

@-webkit-keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}



.project-page.mellow-app section.pairing .tile_one, .project-page.mellow-app section.pairing .tile_two, .project-page.mellow-app section.pairing .tile_three, .project-page.mellow-app section.pairing .tile_four, .project-page.mellow-app section.pairing .tile_five {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.pairing .tile_seven {
	border: none;
}

.project-page.mellow-app section.pairing .tile_two {
	height: 420px;
	position: relative;
	display: flex;
	vertical-align: middle;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.pairing .welcome .middle img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.pairing .welcome .middle .welcome-icon {
	top: 0;
	opacity: 0;
}

.project-page.mellow-app section.pairing .welcome .middle .welcome-text {
	top: 370px;
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_three .middle .welcome-icon, .project-page.mellow-app section.pairing .tile_three .middle .welcome-text, .project-page.mellow-app section.pairing .time_three .bottom .bottom-btn, .project-page.mellow-app section.pairing .tile_three.wifi .bottom .bottom-btn {
	opacity: 1;
}

.project-page.mellow-app section.pairing .tile_one.animate .middle .welcome-icon {
	animation: pairing-slide-up 1s ease forwards;
	animation-delay: 0.3s;
}

.project-page.mellow-app section.pairing .tile_one.animate .middle .welcome-text {
	animation: pairing-slide-up 1s ease forwards;
	animation-delay: 0.6s;
}

.project-page.mellow-app section.pairing .tile_one.animate .bottom .bottom-btn  {
	animation: pairing-slide-up 0.8s ease forwards;
	animation-delay: 0.9s;
}

.project-page.mellow-app section.pairing .welcome .bottom .bottom-btn {
	width: 100%;
	height: 100%;
	display: block;
	background: #EAEAEA;
	border-top: 0.5px solid #D8D8D8;
	opacity: 0;
}

.project-page.mellow-app section.pairing .welcome .bottom .right {
	width: 50%;
	background: #C39702;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
}

.project-page.mellow-app section.pairing .screen.welcome .bottom p {
	margin-top: 12px;
	margin-bottom: 12px;
}

.project-page.mellow-app section.pairing .welcome .bottom .right p {
	color: white;
}

.project-page.mellow-app section.pairing .welcome .bottom .left p {
	color: #C39702;
}

.project-page.mellow-app section.pairing .welcome .bottom .left {
	width: 50%;
}

.project-page.mellow-app section.pairing .tile_four, .project-page.mellow-app section.pairing .tile_six {
	margin-top: -420px;
}

.project-page.mellow-app section.pairing .screen {
	overflow: hidden;
}

.project-page.mellow-app section.pairing .screen.welcome .welcome-bg {
	width: 100%;
	height: 100%;
	display: block;
	background: #E2E2E2;
}

.project-page.mellow-app section.pairing .screen .bottom {
	width: 292px;
	height: 65px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
}

.project-page.mellow-app section.pairing .screen .bottom.bottom-next {
	background: #F3F4F6;
	border-top: 0.5px solid #D8D8D8;
}

.project-page.mellow-app section.pairing .screen .bottom.gold-btn {
	background: #C39702;
}

.project-page.mellow-app section.pairing .screen .bottom p {
	font-size: 12px;
	text-align: center;
	margin-top: 15px;
	display: block;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.2px;
}

.project-page.mellow-app section.pairing  .screen .bottom.bottom-next p {
	color: #C39702;
}

.project-page.mellow-app section.pairing .screen .bottom.gold-btn p {
	color: white;
}

.project-page.mellow-app section.pairing .screen .middle {
	position: absolute;
	left: 0;
	right: 0;
	top: 70px;
	margin: auto;
	width: 100%;
	height: 495px;
}

.project-page.mellow-app section.pairing .screen .middle .mellow-illustration {
	width: 250px;
	display: block;
	height: 230px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 60px;
}

.project-page.mellow-app section.pairing .screen .middle .mellow-illustration img {
	position: absolute;
}

.project-page.mellow-app section.pairing .screen .middle .machine-bg {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.pairing .screen .middle .machine-base {
	left: 58px;
	top: 42px;
}

.project-page.mellow-app section.pairing .screen .middle .machine-base-top {
	top: 133px;
	left: 131px;
}

.project-page.mellow-app section.pairing .screen .middle .machine-vat {
	left: 79px;
	top: 27px;
}

.project-page.mellow-app section.pairing .screen .middle .machine-lid {
	left: 81px;
	top: 24px;
}

.project-page.mellow-app section.pairing .screen .middle .machine-cable {
	left: 27px;
	top: 133px;
}

.project-page.mellow-app section.pairing .screen .middle .machine-wall-plug {
	left: 17px;
	top: 108px;
}

.project-page.mellow-app section.pairing .screen .middle .machine-light-orange, .project-page.mellow-app section.pairing .screen .middle .machine-light-green {
	top: 56px;
	left: 84px;
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_four .screen .middle .machine-wall-plug, .project-page.mellow-app section.pairing .tile_four .screen .middle .machine-cable, .project-page.mellow-app section.pairing .tile_four .screen .middle .machine-bg, .project-page.mellow-app section.pairing .tile_four .screen .middle .text {
	opacity: 0;
}


.project-page.mellow-app section.pairing .screen .middle .text {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 345px;
}


/*** TILE FOUR ****/

.project-page.mellow-app section.pairing .tile_four .screen .middle .machine-vat {
	transform: translateY(60px);
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-vat {
	animation: pairing-turnon-vat 8s ease forwards;
}


.project-page.mellow-app section.pairing .tile_four .screen .middle .machine-lid {
	transform: translateY(10px);
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-lid {
	animation: pairing-turnon-lid 8s ease forwards;
}

.project-page.mellow-app section.pairing .tile_four .screen .middle .machine-base, .project-page.mellow-app section.pairing .tile_four .screen .middle .machine-base-top {
	transform: translateY(110px);
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-base, .project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-base-top {
	animation: pairing-turnon-base 8s ease forwards;
}

.project-page.mellow-app section.pairing .tile_four .screen .middle .machine-bg, .project-page.mellow-app section.pairing .tile_four .screen .middle .machine-wall-plug, .project-page.mellow-app section.pairing .tile_four .screen .middle .text, .project-page.mellow-app section.pairing .tile_four .screen .middle .machine-cable, .project-page.mellow-app section.pairing .tile_four .screen .middle .machine-light-orange {
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-bg, .project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-wall-plug, .project-page.mellow-app section.pairing .tile_four.animate .screen .middle .text {
	animation: pairing-turnon-fadein-bg 8s ease forwards;
}

.project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-cable {
	animation: pairing-turnon-fadein-cable 8s ease forwards;
}

.project-page.mellow-app section.pairing .tile_four.animate .screen .middle .machine-light-orange {
	animation: pairing-turnon-fadein-light 4s ease infinite;
	animation-delay: 5s;
}


/*** BASE ***/

@-webkit-keyframes pairing-turnon-base {
	0% { transform: translateY(110px); opacity: 0; }
	10% { transform: translateY(110px); opacity: 1; }
	30% { transform: translateY(60px); opacity: 1; }
	40% { transform: translateY(-5px); opacity: 1; }
	45% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
	/*100% { transform: translateY(0px); opacity: 0; }*/
	
}

@keyframes pairing-turnon-base {
	0% { transform: translateY(110px); opacity: 0; }
	10% { transform: translateY(110px); opacity: 1; }
	30% { transform: translateY(60px); opacity: 1; }
	40% { transform: translateY(-5px); opacity: 1; }
	45% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
	/*100% { transform: translateY(0px); opacity: 0; }*/
}


/*** VAT ***/

@-webkit-keyframes pairing-turnon-vat {
	0% { transform: translateY(60px); opacity: 0; }
	10% { transform: translateY(60px); opacity: 1; }
	30% { transform: translateY(60px); opacity: 1; }
	40% { transform: translateY(-5px); opacity: 1; }
	45% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
	/*100% { transform: translateY(0px); opacity: 0; }*/
	
}

@keyframes pairing-turnon-vat {
	0% { transform: translateY(60px); opacity: 0; }
	10% { transform: translateY(60px); opacity: 1; }
	30% { transform: translateY(60px); opacity: 1; }
	40% { transform: translateY(-5px); opacity: 1; }
	45% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
	/*100% { transform: translateY(0px); opacity: 0; }*/
}


/*** LID ***/

@-webkit-keyframes pairing-turnon-lid {
	0% { transform: translateY(10px); opacity: 0; }
	10% { transform: translateY(10px); opacity: 1; }
	30% { transform: translateY(60px); opacity: 1; }
	40% { transform: translateY(-5px); opacity: 1; }
	45% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
	/*100% { transform: translateY(0px); opacity: 0; }*/
	
}

@keyframes pairing-turnon-lid {
	0% { transform: translateY(10px); opacity: 0; }
	10% { transform: translateY(10px); opacity: 1; }
	30% { transform: translateY(60px); opacity: 1; }
	40% { transform: translateY(-5px); opacity: 1; }
	45% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
	/*100% { transform: translateY(0px); opacity: 0; }*/
}


/*** BG AND TEXT FADE IN ***/

@-webkit-keyframes pairing-turnon-fadein-bg {
	0% { opacity: 0; }
	10% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0; }
	45% { opacity: 0; }
	60% { opacity: 1; }
	100% { opacity: 1; }
	/*100% { opacity: 0; }*/
	
}

@keyframes pairing-turnon-fadein-bg {
	0% { opacity: 0; }
	10% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0; }
	45% { opacity: 0; }
	60% { opacity: 1; }
	100% { opacity: 1; }
	/*100% { opacity: 0; }*/
}


/*** CABLE FADE IN ***/

@-webkit-keyframes pairing-turnon-fadein-cable {
	0% { opacity: 0; }
	10% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0; }
	45% { opacity: 0; }
	70% { opacity: 1; }
	100% { opacity: 1; }
	/*100% { opacity: 0; }*/
	
}

@keyframes pairing-turnon-fadein-cable {
	0% { opacity: 0; }
	10% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0; }
	45% { opacity: 0; }
	70% { opacity: 1; }
	100% { opacity: 1; }
	/*100% { opacity: 0; }*/
}


/*** ORANGE LIGHT ***/

@-webkit-keyframes pairing-turnon-fadein-light {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 0; }
	75% { opacity: 1; }
	100% { opacity: 0; }
	
}

@keyframes pairing-turnon-fadein-light {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 0; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}






.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration {
	width: 100%;
	height: 230px;
	position: absolute;
	top: 60px;
}

.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand {
	position: absolute;
	left: 42px;
	top: 60px;
	transform: translateX(-80px);
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_five.animate .screen .middle .hand-illustration .machine-hand {
	animation: pairing-connect-hand 9s ease infinite;
}

.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand-light {
	position: absolute;
	left: 77px;
	top: 44px;
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_five.animate .screen .middle .hand-illustration .machine-hand-light {
	animation: pairing-connect-light 9s ease infinite;
}

.project-page.mellow-app section.pairing .tile_five .screen .middle .machine-light-orange {
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_five.animate .screen .middle .machine-light-orange {
	animation: pairing-connect-machine-light-orange 9s ease infinite;
}

.project-page.mellow-app section.pairing .tile_five .screen .middle .machine-light-green {
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_five.animate .screen .middle .machine-light-green {
	animation: pairing-connect-machine-light-green 9s ease infinite;
}

.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand-vibrate {
	position: absolute;
	left: 94px;
	top: 53px;
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_five.animate .screen .middle .hand-illustration .machine-hand-vibrate {
	animation: pairing-connect-vibration 9s ease infinite;
}


/*** HAND ***/

@-webkit-keyframes pairing-connect-hand {
	0% { transform: translateX(-80px); opacity: 0; }
	20% { transform: translateX(0px); opacity: 1; }
	55% { transform: translateX(0px); opacity: 1; }
	75% { transform: translateX(-80px); opacity: 0; }
	100% { transform: translateX(-80px); opacity: 0; }
}

@keyframes pairing-connect-hand {
	0% { transform: translateX(-80px); opacity: 0; }
	20% { transform: translateX(0px); opacity: 1; }
	55% { transform: translateX(0px); opacity: 1; }
	75% { transform: translateX(-80px); opacity: 0; }
	100% { transform: translateX(-80px); opacity: 0; }
}

/*** MELLOW ORANGE LIGHT ***/

@-webkit-keyframes pairing-connect-machine-light-orange {
	0% { opacity: 0; }
	10% { opacity: 1; }
	20% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes pairing-connect-machine-light-orange {
	0% { opacity: 0; }
	10% { opacity: 1; }
	20% { opacity: 0; }
	100% { opacity: 0; }
}

/*** MELLOW GREEN LIGHT ***/

@-webkit-keyframes pairing-connect-machine-light-green {
	0% { opacity: 0; }
	55% { opacity: 0; }
	65% { opacity: 1; }
	75% { opacity: 0; }
	85% { opacity: 1; }
	95% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes pairing-connect-machine-light-green {
	0% { opacity: 0; }
	55% { opacity: 0; }
	65% { opacity: 1; }
	75% { opacity: 0; }
	85% { opacity: 1; }
	95% { opacity: 0; }
	100% { opacity: 0; }
}


/*** PHONE LIGHT ***/

@-webkit-keyframes pairing-connect-light {
	0% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 1; }
	40% { opacity: 0; }
	55% { opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes pairing-connect-light {
	0% { opacity: 0; }
	20% { opacity: 0; }
	30% { opacity: 1; }
	40% { opacity: 0; }
	55% { opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

/*** VIBRATION ***/

@-webkit-keyframes pairing-connect-vibration {
	0% { transform: translateX(0px); opacity: 0; }
	20% { transform: translateX(0px); opacity: 0; }
	30% { transform: translateX(0px); opacity: 0; }
	40% { transform: translateX(-2px); opacity: 1; }
	45% { transform: translateX(2px); opacity: 1; }
	50% { transform: translateX(-2px); opacity: 1; }
	55% { transform: translateX(2px); opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes pairing-connect-vibration {
	0% { transform: translateX(0px); opacity: 0; }
	20% { transform: translateX(0px); opacity: 0; }
	36% { transform: translateX(0px); opacity: 0; }
	39% { transform: translateX(0px); opacity: 1; }
	40% { transform: translateX(-2px); opacity: 1; }
	41% { transform: translateX(2px); opacity: 1; }
	42% { transform: translateX(-2px); opacity: 1; }
	43% { transform: translateX(2px); opacity: 1; }
	44% { transform: translateX(-2px); opacity: 1; }
	45% { transform: translateX(2px); opacity: 1; }
	46% { transform: translateX(-2px); opacity: 1; }
	47% { transform: translateX(2px); opacity: 1; }
	48% { transform: translateX(-2px); opacity: 1; }
	49% { transform: translateX(2px); opacity: 1; }
	50% { transform: translateX(0px); opacity: 1; }
	53% { transform: translateX(0px); opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}


.project-page.mellow-app section.pairing .tile_six .screen .middle img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting {
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .middle.waiting {
	animation: pairing-waiting-fadein 8s ease forwards;
}


.project-page.mellow-app section.pairing .tile_six .screen .middle .waiting-icon {
	top: 120px;
}

.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting .waiting-icon {
	top: 140px;
	opacity: 0.2;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .middle.waiting .waiting-icon {
	animation: pairing-waiting-icon 2s 3 linear;
}

.project-page.mellow-app section.pairing .tile_six .screen .middle .waiting-text {
	top: 210px;
}

.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting .waiting-text {
	opacity: 0.4;
	top: 230px;
}

.project-page.mellow-app section.pairing .tile_six .screen .waiting {
	opacity: 1;
}

.project-page.mellow-app section.pairing .tile_six .screen .success .waiting-icon, .project-page.mellow-app section.pairing .tile_six .screen .success .waiting-text, .project-page.mellow-app section.pairing .tile_six .screen .success .waiting-name, .project-page.mellow-app section.pairing .tile_six .screen .bottom.success  {
	opacity: 0;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .success .waiting-icon {
	animation: pairing-success-icon 8s ease forwards;
}

.project-page.mellow-app section.pairing .tile_six .screen .waiting-desc {
	height: 140px;
	width: 100%;
	border-top: 0.5px solid #C8C7C7;
	position: absolute;
	bottom: 0;
	display: block;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .waiting-desc  {
	animation: pairing-waiting-desc-fadein 8s ease forwards;
}


.project-page.mellow-app section.pairing .tile_six .screen .waiting-desc img {
	margin-top: 35px;
}

.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-name {
	top: 320px;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .middle.success .waiting-text {
	animation: pairing-success-elements 8s ease forwards;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .middle.success .waiting-name {
	animation: pairing-success-elements 8s ease forwards;
	animation-delay: 0.3s;
}

.project-page.mellow-app section.pairing .tile_six.animate .screen .bottom.success {
	animation: pairing-success-elements 8s ease forwards;
	animation-delay: 0.5s;
}


/*** WAITING ICON ***/

@-webkit-keyframes pairing-waiting-icon {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

@keyframes pairing-waiting-icon {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}


/*** WAITING MIDDLE ***/

@-webkit-keyframes pairing-waiting-fadein {
	0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0;}
	10% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	40% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0;}
	100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0;}
}

@keyframes pairing-waiting-fadein {
	0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0;}
	10% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	40% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0;}
	100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0;}
}

/*** WAITING DESC ***/

@-webkit-keyframes pairing-waiting-desc-fadein {
	0% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0;}
	10% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	40% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	50% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0;}
	100% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0;}
}

@keyframes pairing-waiting-desc-fadein {
	0% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0;}
	10% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	40% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
	50% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0;}
	100% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0;}
}


/*** SUCCESS ICON ***/

@-webkit-keyframes pairing-success-icon {
	0% { transform: translateY(75px) scale(1.5); opacity: 0;}
	45% { transform: translateY(75px) scale(1.5); opacity: 0;}
	60% { transform: translateY(85px) scale(1);opacity: 1; }
	70% { transform: translateY(0px) scale(1);opacity: 1;}
	100% { transform: translateY(0px) scale(1);opacity: 1;}
}

@keyframes pairing-success-icon {
	0% { transform: translateY(75px) scale(1.5); opacity: 0;}
	45% { transform: translateY(75px) scale(1.5); opacity: 0;}
	60% { transform: translateY(85px) scale(1);opacity: 1; }
	70% { transform: translateY(0px) scale(1);opacity: 1;}
	100% { transform: translateY(0px) scale(1);opacity: 1;}
}

/*** SUCCESS ELEMENTS ***/

@-webkit-keyframes pairing-success-elements {
	0% { transform: translateY(85px) ; opacity: 0;}
	45% { transform: translateY(85px); opacity: 0;}
	60% { transform: translateY(85px); opacity: 0; }
	70% { transform: translateY(0px);opacity: 1;}
	100% { transform: translateY(0px);opacity: 1;}
}

@keyframes pairing-success-elements {
	0% { transform: translateY(85px) ; opacity: 0;}
	45% { transform: translateY(85px); opacity: 0;}
	60% { transform: translateY(85px); opacity: 0; }
	70% { transform: translateY(0px);opacity: 1;}
	100% { transform: translateY(0px);opacity: 1;}
}








.project-page.mellow-app section.pairing .tile_two img {
	margin: 0 auto;
	width: 82px;
}

.project-page.mellow-app section.pairing .border {
	height: 2830px;
}

.project-page.mellow-app section.onboarding {
	height: 1395px;
	width: 100%;
	background: #f6f6f6 url('../images/mellow-app/onboarding.jpg') no-repeat center center;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.home {
	background: white;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.home .title {
	height: 350px;
	display: flex;
	vertical-align: middle;
}

.project-page.mellow-app section.home .title img {
	margin: 0 auto;
	width: 319px;
}

.project-page.mellow-app section.home .home-iphone {
	width: 80%;
	display: flex;
	height: 1020px;
	vertical-align: middle;
	margin: 0 auto;
	border: 1px solid #E1E1E1;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	position: relative;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone .device-tile {
	padding: 0;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow {
	transform: scale(0.94);
	display: block;
	margin: 0 auto;
	align-self: center;
	position: relative;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .shadow {
	-webkit-box-shadow: 3px 3px 3px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 3px 3px 3px 0px rgba(172,146,119,0.5);
	box-shadow: 3px 3px 3px 0px rgba(172,146,119,0.5);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow {
	transform: scale(1);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow .shadow {
	-webkit-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .top {
	/*background: url('../images/mellow-app/home-screen-top.png') no-repeat center center;*/
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .bottom {
	width: 292px;
	height: 67px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar {
	bottom: 0px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	width: 292px;
	height: 40px;
	border-top: 0.5px solid #E3E3E3;
	background: #FFFFFF;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	bottom: 0px;
	transform: translateY(0px);
}

.project-page.mellow-app section.home .home-iphone.iphoneshadow  .wrap-shadow .cooking-bar {
	transform: translateY(-65px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar img, .project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar img {
	top: 0;
	bottom: 0;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar .cooking-bar-wrap {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p.status {
	font-size: 7px;
	color: #000000;
	opacity: 0.5;
	font-weight: 400;
	text-transform: uppercase;
	top: 8px;
	letter-spacing: 0.2px;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p.ingredient {
	font-size: 9.5px;
	color: #000000;
	opacity: 0.6;
	font-weight: 400;
	top: 18px;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .screen {
	background: #F2F2F2;
	overflow: hidden;
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow .middle {
	position: absolute;
	width: 100%;
	height: 655px;
	background: #F2F2F2 url('../images/mellow-app/home-screen.jpg') no-repeat center top;
	top: -128px;
}

.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow .middle {
	animation: home-list-scroll 1.5s ease forwards;
}

.project-page.mellow-app section.home .home-iphone.list-scroll-off .wrap-shadow .middle {
	animation: home-list-scroll-off 1.5s ease forwards;
}

@-webkit-keyframes home-list-scroll {
	0% { transform: translateY(0px); }
	70% { transform: translateY(207px); }
	100% { transform: translateY(197px); }
}

@keyframes home-list-scroll {
	0% { transform: translateY(0px); }
	70% { transform: translateY(207px); }
	100% { transform: translateY(197px); }
}

@-webkit-keyframes home-list-scroll-off {
	0% { transform: translateY(197px); }
	70% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

@keyframes home-list-scroll-off {
	0% { transform: translateY(197px); }
	70% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}



/*.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow img {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.home .home-iphone .wrap-shadow img {
	width: 333px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}*/

/*.project-page.mellow-app section.home .home-iphone .shadow {
	width: 333px;
	height: 668px;
	display: block;
	position: absolute;
	-webkit-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
}*/

.project-page.mellow-app section.home .home-details {
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}

.project-page.mellow-app section.home .border {
	height: 1345px;
}


.project-page.mellow-app .device-closeup .item {
	width: 460px;
	height: 564px;
	display: block;
	padding-top: 108px;
	margin: 0 auto;
	overflow: hidden;
}

.project-page.mellow-app .device-closeup .item .device {
	position: relative;
	display: block;
}

.project-page.mellow-app .device-closeup .item .device .hardware {
	width: 460px;
	height: 564px;
	background: url('../images/mellow-app/device-frame-cut.png') no-repeat center center;
	display: block;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.project-page.mellow-app section.home .device-closeup .item .device .screen {
	position: absolute;
	width: 402px;
	height: 540px;
	display: block;
	margin: 0;
	left: 29px;
	top: 25px;
	overflow: hidden;
}

.project-page.mellow-app section.home .device-closeup .item .device .screen {
	background: #F2F2F2;
}

.project-page.mellow-app section.home .device-closeup .item .device .screen .top {
	/*background: url('../images/mellow-app/home-details-screen-top.png') no-repeat center center;
	width: 402px;
	height: 95px;*/
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
}

.project-page.mellow-app section.home .pull-to-search .item .device .screen .middle, .project-page.mellow-app section.home .pre-cooling .item .device .screen .middle, .project-page.mellow-app section.home .notification .item .device .screen .middle {
	width: 402px;
	height: 485px;
	background: url('../images/mellow-app/home-details-screen.jpg') no-repeat center top;
	position: absolute;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .middle {
	top: 165px;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar {
	height: 58px;
	width: 100%;
	background: white;
	border-bottom: 1.5px solid #E1E1E3;
	position: absolute;
	top: 94px;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar p {
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	position: absolute;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .bar-title {
	color: #818081;
	top: 10px;
	left: 12px;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp {
	color: #4A4A4A;
	top: 10px;
	right: 65px;
	opacity: 0;
}

.project-page.mellow-app section.home .pre-cooling.animate .item .device .screen .pre-cooling-bar .temp {
	animation: home-details-precooling-temp 1s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling.animate-off .item .device .screen .pre-cooling-bar .temp {
	animation: home-details-precooling-temp-off 1s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp-off {
	top: 10px;
	right: 65px;
	color: #C7C7C7;
	opacity: 1;
}

.project-page.mellow-app section.home .pre-cooling.animate .item .device .screen .pre-cooling-bar .temp-off {
	animation: home-details-precooling-turnoff 1s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling.animate-off .item .device .screen .pre-cooling-bar .temp-off {
	animation: home-details-precooling-turnoff-off 1s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .switch {
	position: absolute;
	top: 18px;
	right: 10px;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .switch #switch-bg {
	fill: #E1E1E1;
}

.project-page.mellow-app section.home .pre-cooling.animate .item .device .screen .pre-cooling-bar .switch #switch-bg {
	animation: home-details-precooling-switch-bg 0.5s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling.animate-off .item .device .screen .pre-cooling-bar .switch #switch-bg {
	animation: home-details-precooling-switch-bg-off 0.5s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar.animate .switch #switch-bg {
	fill: #50E3C2;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .switch #switch {
	transform: translate(5px, 4px);
}

.project-page.mellow-app section.home .pre-cooling.animate .item .device .screen .pre-cooling-bar .switch #switch {
	animation: home-details-precooling-switch 0.5s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling.animate-off .item .device .screen .pre-cooling-bar .switch #switch {
	animation: home-details-precooling-switch-off 0.5s ease forwards;
}

.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .help {
	position: absolute;
	top: 22px;
	left: 120px;
}


/*** SWITCH BG ***/

@-webkit-keyframes home-details-precooling-switch-bg {
	0% { fill: #E1E1E1; }
	100% { fill: #50E3C2; }
}

@keyframes home-details-precooling-switch-bg {
	0% { fill: #E1E1E1; }
	100% { fill: #50E3C2; }
}

/*** SWITCH BG OFF ***/

@-webkit-keyframes home-details-precooling-switch-bg-off {
	0% { fill: #50E3C2; }
	100% { fill: #E1E1E1; }
}

@keyframes home-details-precooling-switch-bg-off {
	0% { fill: #50E3C2; }
	100% { fill: #E1E1E1; }
}

/*** SWITCH SWITCH ***/

@-webkit-keyframes home-details-precooling-switch {
	0% { transform: translate(5px, 4px); }
	100% { transform: translate(20px, 4px); }
}

@keyframes home-details-precooling-switch {
	0% { transform: translate(5px, 4px); }
	100% { transform: translate(20px, 4px); }
}

/*** SWITCH SWITCH OFF ***/

@-webkit-keyframes home-details-precooling-switch-off {
	0% { transform: translate(20px, 4px); }
	100% { transform: translate(5px, 4px); }
}

@keyframes home-details-precooling-switch-off {
	0% { transform: translate(20px, 4px); }
	100% { transform: translate(5px, 4px); }
}

/*** SWITCH TEMP TEXT ***/

@-webkit-keyframes home-details-precooling-temp {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes home-details-precooling-temp {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/*** SWITCH TEMP TEXT OFF ***/

@-webkit-keyframes home-details-precooling-temp-off {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes home-details-precooling-temp-off {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

/*** SWITCH OFF TEXT ***/

@-webkit-keyframes home-details-precooling-turnoff {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes home-details-precooling-turnoff {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

/*** SWITCH OFF TEXT OFF ***/

@-webkit-keyframes home-details-precooling-turnoff-off {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes home-details-precooling-turnoff-off {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


.project-page.mellow-app section.home .pull-to-search .item .device .screen .middle {
	top: 105px;
}

.project-page.mellow-app section.home .pull-to-search.animate .item .device .screen .middle {
	animation: home-details-search-list 1s ease forwards;
}

.project-page.mellow-app section.home .pull-to-search.animate-off .item .device .screen .middle {
	animation: home-details-search-list-off 1s ease forwards;
}


.project-page.mellow-app section.home .pull-to-search .item .device .screen .search {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 20px;
}

.project-page.mellow-app section.home .pull-to-search.animate .item .device .screen .search {
	animation: home-details-search 1s ease forwards;
}

.project-page.mellow-app section.home .pull-to-search.animate-off .item .device .screen .search {
	animation: home-details-search-off 1s ease forwards;
}

.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .search-icon {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 60px;
}


.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .elements {
	opacity: 0;
}

.project-page.mellow-app section.home .pull-to-search.animate .item .device .screen .search .elements {
	animation: home-details-elements 1s ease forwards;
}

.project-page.mellow-app section.home .pull-to-search.animate-off .item .device .screen .search .elements {
	animation: home-details-elements-off 1s ease forwards;
}

.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .search-icon {
	transform: scale(0.3);
	opacity: 0;
}

.project-page.mellow-app section.home .pull-to-search.animate .item .device .screen .search .search-icon {
	animation: home-details-search-icon 1s ease forwards;
}

.project-page.mellow-app section.home .pull-to-search.animate-off .item .device .screen .search .search-icon {
	animation: home-details-search-icon-off 1s ease forwards;
}

/*** SEARCH LIST ***/

@-webkit-keyframes home-details-search-list {
	0% { transform: translateY(0px); }
	100% { transform: translateY(140px); }
}

@keyframes home-details-search-list {
	0% { transform: translateY(0px); }
	100% { transform: translateY(140px); }
}

/*** SEARCH LIST OFF ***/

@-webkit-keyframes home-details-search-list-off {
	0% { transform: translateY(140px); }
	100% { transform: translateY(0px); }
}

@keyframes home-details-search-list-off {
	0% { transform: translateY(140px); }
	100% { transform: translateY(0px); }
}

/*** SEARCH ***/

@-webkit-keyframes home-details-search {
	0% { top: 20px;}
	100% { top: 110px; }
}

@keyframes home-details-search {
	0% { top: 20px;}
	100% { top: 110px; }
}

/*** SEARCH OFF ***/

@-webkit-keyframes home-details-search-off {
	0% { top: 110px;}
	100% { top: 20px; }
}

@keyframes home-details-search-off {
	0% { top: 110px;}
	100% { top: 20px; }
}

/*** SEARCH ELEMENTS ***/

@-webkit-keyframes home-details-elements {
	0% { opacity: 0; }
	100% { opacity: 0.9; }
}

@keyframes home-details-elements {
	0% { opacity: 0; }
	100% { opacity: 0.9; }
}

/*** SEARCH ELEMENTS OFF ***/

@-webkit-keyframes home-details-elements-off {
	0% { opacity: 0.9; }
	100% { opacity: 0; }
}

@keyframes home-details-elements-off {
	0% { opacity: 0.9; }
	100% { opacity: 0; }
}

/*** SEARCH ICON ***/

@-webkit-keyframes home-details-search-icon {
	0% { transform: scale(0.3); opacity: 0;}
	5% { opacity: 1;}
	100% { transform: scale(1); opacity: 1;}
}

@keyframes home-details-search-icon {
	0% { transform: scale(0.3); opacity: 0;}
	5% { opacity: 1;}
	100% { transform: scale(1); opacity: 1;}
}

/*** SEARCH ICON OFF ***/

@-webkit-keyframes home-details-search-icon-off {
	0% { transform: scale(1); opacity: 1;}
	95% { opacity: 0;}
	100% { transform: scale(0.3); opacity: 0;}
}

@keyframes home-details-search-icon-off {
	0% { transform: scale(1); opacity: 1;}
	95% { opacity: 0;}
	100% { transform: scale(0.3); opacity: 0;}
}


.project-page.mellow-app section.home .notification .item .device .screen .middle {
	top: 90px;
	background-position-y: 18px;
	background-color: #F2F2F2;
	/*animation: home-details-notification 1.5s ease forwards;*/
	transform: translateX(0);
}

.project-page.mellow-app section.home .notification.animate .item .device .screen .middle {
	animation: home-details-notification 1.5s ease forwards;
}

.project-page.mellow-app section.home .notification.animate-off .item .device .screen .middle {
	animation: home-details-notification-off 1.5s ease forwards;
}

.project-page.mellow-app section.home .notification .item .device .screen .top {
	width: 402px;
	height: 50px;
	top: 45px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
	overflow: hidden;
	transform: translateX(0);
}

.project-page.mellow-app section.home .notification .item .device .screen .top img {
	position: absolute;
	left: 0;
	bottom: 0;
}

.project-page.mellow-app section.home .notification.animate .item .device .screen .top {
	animation: home-details-notification 1.5s ease forwards;
}

.project-page.mellow-app section.home .notification.animate-off .item .device .screen .top {
	animation: home-details-notification-off 1.5s ease forwards;
}

.project-page.mellow-app section.home .notification.animated .item .device .screen .top {
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
	left: -720px;
}

.project-page.mellow-app section.home .notification .item .device .screen {
	background: none;
}

.project-page.mellow-app section.home .notification .item .device .screen .notification-screen {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/mellow-app/home-details-notifications.png') no-repeat center top;
}

.project-page.mellow-app section.home .notification .item .device .screen .notification-top {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
}

/*.project-page.mellow-app section.home .notification.animate .item .device .screen .notification-top {
	animation: home-details-notification-top 1.5s ease forwards;
}*/

.project-page.mellow-app section.home .notification.animate .item .device .screen .notification-top img {
	animation: home-details-notification-top-opacity 0.4s ease forwards;
}

.project-page.mellow-app section.home .notification.animate-off .item .device .screen .notification-top img {
	animation: home-details-notification-top-opacity-off 1.6s ease forwards;
}


/*** NOTIFICATION ***/

@-webkit-keyframes home-details-notification {
	0% { transform: translateX(0);}
	100% { transform: translateX(-352px);}
}

@keyframes home-details-notification {
	0% { transform: translateX(0);}
	100% { transform: translateX(-352px);}
}

/*** NOTIFICATION OFF ***/

@-webkit-keyframes home-details-notification-off {
	0% { transform: translateX(-352px);}
	100% { transform: translateX(0);}
}

@keyframes home-details-notification-off {
	0% { transform: translateX(-352px);}
	100% { transform: translateX(0);}
}

/*** NOTIFICATION TOP MOVE ***/

/*@-webkit-keyframes home-details-notification-top {
	0% { transform: translateX(0);}
	100% { transform: translateX(-360px);}
}

@keyframes home-details-notification-top {
	0% { transform: translateX(0);}
	100% { transform: translateX(-360px);}
}*/

/*** NOTIFICATION TOP OPACITY ***/

@-webkit-keyframes home-details-notification-top-opacity {
	0% { opacity: 1;}
	100% { opacity: 0;}
}

@keyframes home-details-notification-top-opacity {
	0% { opacity: 1;}
	100% { opacity: 0;}
}

/*** NOTIFICATION TOP OPACITY OFF ***/

@-webkit-keyframes home-details-notification-top-opacity-off {
	0% { opacity: 0;}
	80% { opacity: 0;}
	100% { opacity: 1;}
}

@keyframes home-details-notification-top-opacity-off {
	0% { opacity: 0;}
	80% { opacity: 0;}
	100% { opacity: 1;}
}




.project-page.mellow-app section.home .home-details .tile_one, .project-page.mellow-app section.home .home-details .tile_two, .project-page.mellow-app section.home .home-details .tile_three {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.home .home-details .tile_three {
	margin-top: -322px;
}

/*.project-page.mellow-app section.home .home-details .tile_two img, .project-page.mellow-app section.home .home-details .tile_three img, .project-page.mellow-app section.home .home-details .tile_four img {
	margin: 0 auto;
	padding-top: 108px;
	padding-bottom: 0;
	display: block;
	height: 100%;
	align-self: center;
}*/

.project-page.mellow-app section.home .home-details .tile_five {
	margin-top: -321px;
	height: 320px;
}

.project-page.mellow-app section.ingredient-selection {
	min-height: 970px;
	background: white;
	border-bottom: 1px solid #E1E1E1;
	position: relative;
	overflow: hidden;
}

.project-page.mellow-app section.ingredient-selection .device {
	position: relative;
	display: block;
}


.project-page.mellow-app section.ingredient-selection .hardware {
	width: 334px;
	height: 668px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.project-page.mellow-app section.ingredient-selection .screen {
	width: 291px;
	height: 630px;
	position: absolute;
	top: 19px;
	left: 21px;
	overflow: hidden;
}

.project-page.mellow-app section.ingredient-selection .item-1 .screen {
	background: url('../images/mellow-app/ingredient-selection-list.jpg') no-repeat center center;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen {
	background: url('../images/mellow-app/ingredient-selection-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.ingredient-selection .item-3 .screen {
	background: url('../images/mellow-app/ingredient-selection-settime.jpg') no-repeat center center;
}

/*.project-page.mellow-app section.ingredient-selection .shadow {
	width: 308px;
	height: 645px;
	position: absolute;
	top: 20px;
	left: 22px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
}*/

.project-page.mellow-app section.ingredient-selection .item {
	width: 334px;
	height: 668px;
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease; 
}

.project-page.mellow-app section.ingredient-selection .item-1 {
	left: -330px;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen p, .project-page.mellow-app section.ingredient-selection .item-2 .screen div, .project-page.mellow-app section.ingredient-selection .item-2 .screen ul {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen .title {
	font-size: 19px;
	color: white;
	font-weight: 400;
	letter-spacing: 0.55px;
	text-transform: uppercase;
	top: 148px;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen .time-temp {
	color: white;
	font-size: 11px;
	font-weight: 400;
	top: 178px;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen .select-border {
	width: 70px;
	height: 19px;
	border: 1px solid #FFFFFF;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	top: 217px;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen ul {
	top: 216px;
	margin: 0;
	padding: 0;
}

.project-page.mellow-app section.ingredient-selection.slide .item-2 .screen ul {
	animation: ingredient-selection-middle 6s ease forwards;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen ul li {
	font-size: 9px;
	color: white;
	font-weight: 500;
	letter-spacing: 1.55px;
	text-transform: uppercase;
	display: inline-block;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen .desc {
	font-size: 9px;
	color: white;
	font-weight: 400;
	line-height: 12px;
	top: 247px;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen .desc-medium, .project-page.mellow-app section.ingredient-selection .item-2 .screen .desc-large {
	opacity: 0;
}

.project-page.mellow-app section.ingredient-selection.slide  .item-2 .screen li.small {
	animation: ingredient-selection-middle-small 6s ease forwards;
	opacity: 0.6;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection.slide  .item-2 .screen .small-desc {
	animation: ingredient-selection-middle-small-desc 6s ease forwards;
	opacity: 0;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection.slide  .item-2 .screen li.medium {
	animation: ingredient-selection-middle-medium 6s ease forwards;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection.slide  .item-2 .screen .medium-desc {
	animation: ingredient-selection-middle-medium-desc 6s ease forwards;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection.slide  .item-2 .screen li.large {
	animation: ingredient-selection-middle-large 6s ease forwards;
	opacity: 0.6;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection.slide .item-2 .screen .large-desc {
	animation: ingredient-selection-middle-large-desc 6s ease forwards;
	opacity: 0;
	animation-delay: 1s;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen ul li:first-child {
	margin: 0;
}



/*** INGREDIENT SIZE SLIDER ANIMATION ***/

@-webkit-keyframes ingredient-selection-middle {
	0% { transform: translateX(1px); }
	5% { transform: translateX(1px); }
	20% { transform: translateX(85px); }
	25% { transform: translateX(82px); }
	35% { transform: translateX(82px); }
	50% { transform: translateX(1px); }
	55% { transform: translateX(1px); }
	70% { transform: translateX(-85px); }
	75% { transform: translateX(-79px); }
	80% { transform: translateX(-79px); }
	95% { transform: translateX(6px); }
	100% { transform: translateX(1px);}
}

@keyframes ingredient-selection-middle {
	0% { transform: translateX(1px); }
	5% { transform: translateX(1px); }
	20% { transform: translateX(85px); }
	25% { transform: translateX(82px); }
	35% { transform: translateX(82px); }
	50% { transform: translateX(1px); }
	55% { transform: translateX(1px); }
	70% { transform: translateX(-82px); }
	75% { transform: translateX(-79px); }
	80% { transform: translateX(-79px); }
	95% { transform: translateX(3px); }
	100% { transform: translateX(1px);}
}



/*** INGREDIENT SIZE SLIDER - SMALL ***/

@-webkit-keyframes ingredient-selection-middle-small {
	0% { opacity: 0.6; }
	5% { opacity: 0.6; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 1; }
	50% { opacity: 0.6; }
	55% { opacity: 0.6; }
	70% { opacity: 0.6; }
	75% { opacity: 0.6; }
	80% { opacity: 0.6;}
	95% { opacity: 0.6;}
	100% { opacity: 0.6;}
}

@keyframes ingredient-selection-middle-small {
	0% { opacity: 0.6; }
	5% { opacity: 0.6; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 1; }
	50% { opacity: 0.6; }
	55% { opacity: 0.6; }
	70% { opacity: 0.6; }
	75% { opacity: 0.6; }
	80% { opacity: 0.6;}
	95% { opacity: 0.6;}
	100% { opacity: 0.6;}
}


/*** INGREDIENT SIZE SLIDER - SMALL DESC ***/

@-webkit-keyframes ingredient-selection-middle-small-desc {
	0% { opacity: 0; }
	5% { opacity: 0; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 1; }
	50% { opacity: 0; }
	55% { opacity: 0; }
	70% { opacity: 0; }
	75% { opacity: 0; }
	80% { opacity: 0;}
	95% { opacity: 0;}
	100% { opacity: 0;}
}

@keyframes ingredient-selection-middle-small-desc {
	0% { opacity: 0; }
	5% { opacity: 0; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 1; }
	50% { opacity: 0; }
	55% { opacity: 0; }
	70% { opacity: 0; }
	75% { opacity: 0; }
	80% { opacity: 0;}
	95% { opacity: 0;}
	100% { opacity: 0;}
}


/*** INGREDIENT SIZE SLIDER - MEDIUM ***/

@-webkit-keyframes ingredient-selection-middle-medium {
	0% { opacity: 1; }
	5% { opacity: 1; }
	20% { opacity: 0.6; }
	25% { opacity: 0.6; }
	35% { opacity: 0.6; }
	50% { opacity: 1; }
	55% { opacity: 1; }
	70% { opacity: 0.6; }
	75% { opacity: 0.6; }
	80% { opacity: 0.6;}
	95% { opacity: 1;}
	100% { opacity: 1;}
}

@keyframes ingredient-selection-middle-medium {
	0% { opacity: 1; }
	5% { opacity: 1; }
	20% { opacity: 0.6; }
	25% { opacity: 0.6; }
	35% { opacity: 0.6; }
	50% { opacity: 1; }
	55% { opacity: 1; }
	70% { opacity: 0.6; }
	75% { opacity: 0.6; }
	80% { opacity: 0.6;}
	95% { opacity: 1;}
	100% { opacity: 1;}
}


/*** INGREDIENT SIZE SLIDER - MEDIUM DESC ***/

@-webkit-keyframes ingredient-selection-middle-medium-desc {
	0% { opacity: 1; }
	5% { opacity: 1; }
	20% { opacity: 0; }
	25% { opacity: 0; }
	35% { opacity: 0; }
	50% { opacity: 1; }
	55% { opacity: 1; }
	70% { opacity: 0; }
	75% { opacity: 0; }
	80% { opacity: 0;}
	95% { opacity: 1;}
	100% { opacity: 1;}
}

@keyframes ingredient-selection-middle-medium-desc {
	0% { opacity: 1; }
	5% { opacity: 1; }
	20% { opacity: 0; }
	25% { opacity: 0; }
	35% { opacity: 0; }
	50% { opacity: 1; }
	55% { opacity: 1; }
	70% { opacity: 0; }
	75% { opacity: 0; }
	80% { opacity: 0;}
	95% { opacity: 1;}
	100% { opacity: 1;}
}


/*** INGREDIENT SIZE SLIDER - LARGE ***/

@-webkit-keyframes ingredient-selection-middle-large {
	0% { opacity: 0.6; }
	5% { opacity: 0.6; }
	20% { opacity: 0.6; }
	25% { opacity: 0.6; }
	35% { opacity: 0.6; }
	50% { opacity: 0.6; }
	55% { opacity: 0.6; }
	70% { opacity: 1; }
	75% { opacity: 1; }
	80% { opacity: 1;}
	95% { opacity: 0.6;}
	100% { opacity: 0.6;}
}

@keyframes ingredient-selection-middle-large {
	0% { opacity: 0.6; }
	5% { opacity: 0.6; }
	20% { opacity: 0.6; }
	25% { opacity: 0.6; }
	35% { opacity: 0.6; }
	50% { opacity: 0.6; }
	55% { opacity: 0.6; }
	70% { opacity: 1; }
	75% { opacity: 1; }
	80% { opacity: 1;}
	95% { opacity: 0.6;}
	100% { opacity: 0.6;}
}


/*** INGREDIENT SIZE SLIDER - LARGE DESC ***/

@-webkit-keyframes ingredient-selection-middle-large-desc {
	0% { opacity: 0; }
	5% { opacity: 0; }
	20% { opacity: 0; }
	25% { opacity: 0; }
	35% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 0; }
	70% { opacity: 1; }
	75% { opacity: 1; }
	80% { opacity: 1;}
	95% { opacity: 0;}
	100% { opacity: 0;}
}

@keyframes ingredient-selection-middle-large-desc {
	0% { opacity: 0; }
	5% { opacity: 0; }
	20% { opacity: 0; }
	25% { opacity: 0; }
	35% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 0; }
	70% { opacity: 1; }
	75% { opacity: 1; }
	80% { opacity: 1;}
	95% { opacity: 0;}
	100% { opacity: 0;}
}








/*** INGREDIENT SIZE SLIDER ANIMATION ***/

/*@-webkit-keyframes ingredient-selection-middle {
	0% { transform: translateX(82px); opacity: 1; }
	20% { transform: translateX(1px); opacity: 1; }
	25% { transform: translateX(1px); opacity: 1; }
	35% { transform: translateX(-89px); opacity: 1; }
	45% { transform: translateX(-79px); opacity: 1; }
	55% { transform: translateX(-79px); opacity: 1;}
	65% {  transform: translateX(10px); opacity: 1;}
	80% {  transform: translateX(1px); opacity: 1;}
	100% { transform: translateX(1px); opacity: 1;}
}

@keyframes ingredient-selection-middle {
	0% { transform: translateX(82px); opacity: 1; }
	20% { transform: translateX(1px); opacity: 1; }
	25% { transform: translateX(1px); opacity: 1; }
	35% { transform: translateX(-89px); opacity: 1; }
	45% { transform: translateX(-79px); opacity: 1; }
	55% { transform: translateX(-79px); opacity: 1;}
	65% {  transform: translateX(10px); opacity: 1;}
	80% {  transform: translateX(1px); opacity: 1;}
	100% { transform: translateX(1px); opacity: 1;}
}*/







.project-page.mellow-app section.ingredient-selection .item-3 {
	right: -330px;
}

.project-page.mellow-app section.ingredient-selection.slide .item-1 {
	left: -750px;
}

.project-page.mellow-app section.ingredient-selection.slide .item-3 {
	right: -750px;
}

.project-page.mellow-app section.ingredient-selection .item-2 .screen, .project-page.mellow-app section.ingredient-selection .item-2 .hardware {
	z-index: 100;
}

/*.project-page.mellow-app section.ingredient-selection .item-2 .shadow {
	-webkit-box-shadow: -10px 20px 20px 20px rgba(0,0,0,0.7);
	-moz-box-shadow: -10px 20px 20px 20px rgba(0,0,0,0.7);
	box-shadow: -10px 20px 20px 20px rgba(0,0,0,0.7);
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease; 
}

.project-page.mellow-app section.ingredient-selection.slide .item-2 .shadow {
	-webkit-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease; 
}*/



.project-page.mellow-app section.favorites {
	background: white;
	position: relative;
	border-bottom: 1px solid #E1E1E1;
	display: block;
	overflow: hidden;
}

.project-page.mellow-app section.favorites .tile_two .item .screen {
	background: #F2F2F2 url('../images/mellow-app/favorites-list-screen.jpg') no-repeat center -255px;
}

.project-page.mellow-app section.favorites .tile_four .item .top-screen {
	background: #F2F2F2 url('../images/mellow-app/favorites-add-category.png') no-repeat center top;
	position: absolute;
	top: 625px;
	left: 0;
	width: 100%;
	height: 631px;
	display: block;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-page.mellow-app section.favorites .tile_four.animate .item .top-screen {
	top: 0px;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

.project-page.mellow-app section.favorites .tile_four.animate .item .status-bar {
	position: absolute;
	top: 0;
	left: 0;
}


.project-page.mellow-app section.favorites .tile_three .item .screen, .project-page.mellow-app section.favorites .tile_four .item .screen {
	background: #F2F2F2;
}

.project-page.mellow-app section.favorites .tile_three .item .screen .middle, .project-page.mellow-app section.favorites .tile_four .item .screen .middle {
	width: 202px;
	height: 262px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: #F2F2F2 url('../images/mellow-app/favorites-empty.jpg') no-repeat center center;
	transform: translateY(-40px);
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.favorites .tile_three.animate .item .screen .middle {
	transform: translateY(0px);
	opacity: 1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.favorites .tile_four .item .screen .middle {
	opacity: 1;
	transform: translateY(0px);
}

.project-page.mellow-app section.favorites .tile_two.scroll .item .screen{
	animation: favorites-list-scroll 1.5s ease forwards;
}

.project-page.mellow-app section.favorites .tile_two.scroll-off .item .screen {
	animation: favorites-list-scroll-off 1.5s ease forwards;
}

@-webkit-keyframes favorites-list-scroll {
	0% { background-position-y: -140px; }
	70% { background-position-y: 78px; }
	100% { background-position-y: 68px; }
}

@keyframes favorites-list-scroll {
	0% { background-position-y: -140px; }
	70% { background-position-y: 78px; }
	100% { background-position-y: 68px; }
}

@-webkit-keyframes favorites-list-scroll-off {
	0% { background-position-y: 68px; }
	70% { background-position-y: -150px; }
	100% { background-position-y: -140px; }
}

@keyframes favorites-list-scroll-off {
	0% { background-position-y: 68px; }
	70% { background-position-y: -150px; }
	100% { background-position-y: -140px; }
}


.project-page.mellow-app section.favorites .tile_two .item .screen .wrap .top, .project-page.mellow-app section.favorites .tile_three .item .screen .wrap .top, .project-page.mellow-app section.favorites .tile_four .item .screen .wrap .top {
	/*width: 292px;
	height: 70px;
	background: url('../images/mellow-app/favorites-screen-top.png') no-repeat center center;*/
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.favorites .item .screen .wrap .bottom {
	/*width: 292px;
	height: 67px;
	background: url('../images/mellow-app/favorites-screen-bottom.svg') no-repeat center center;*/
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.favorites .item .screen .wrap .bottom img {
	position: absolute;
	left: 0;
	bottom: 0;
}

.project-page.mellow-app section.favorites .border {
	height: 2315px;
}

.project-page.mellow-app section.favorites .tile_one, .project-page.mellow-app section.favorites .tile_two, .project-page.mellow-app section.favorites .tile_three, .project-page.mellow-app section.favorites .tile_four {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.favorites .tile_one {
	height: 390px;
}

.project-page.mellow-app section.favorites .tile_one img {
	margin: 0 auto;
	width: 319px;
}


.project-page.mellow-app section.favorites .tile_three, .project-page.mellow-app section.favorites .tile_five {
	margin-top: -518px;
}

.project-page.mellow-app section.favorites .tile_five .item .screen {
	background: #F2F2F2 url('../images/mellow-app/favorites-add-ingredient.png') no-repeat center center;
}

.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul {
	list-style: none;
	position: absolute;
	right: 0px;
	top: 121px;
	margin: 0;
	padding: 0;
}

.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li {
	position: relative;
	height: 48px;
	margin: 0;
	display: block;
	width: 45px;
}

.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li img.added-btn {
	opacity: 0;
}

.project-page.mellow-app section.favorites .tile_five.animate .item .screen .wrap ul li.one img.add-btn {
	animation: favorites-add-btn 0.5s ease forwards;
}

.project-page.mellow-app section.favorites .tile_five.animate .item .screen .wrap ul li.two img.add-btn {
	animation: favorites-add-btn 0.5s ease forwards;
	animation-delay: 0.5s;
}

.project-page.mellow-app section.favorites .tile_five.animate .item .screen .wrap ul li.three img.add-btn {
	animation: favorites-add-btn 0.5s ease forwards;
	animation-delay: 1s;
}


.project-page.mellow-app section.favorites .tile_five.animate .item .screen .wrap ul li.one img.added-btn {
	animation: favorites-added-btn 0.5s ease forwards;
	animation-delay: 0.4s;
}

.project-page.mellow-app section.favorites .tile_five.animate .item .screen .wrap ul li.two img.added-btn {
	animation: favorites-added-btn 0.5s ease forwards;
	animation-delay: 0.8s;
}

.project-page.mellow-app section.favorites .tile_five.animate .item .screen .wrap ul li.three img.added-btn {
	animation: favorites-added-btn 0.5s ease forwards;
	animation-delay: 1.3s;
}


@-webkit-keyframes favorites-add-btn {
	0% { opacity: 1;}
	100% { opacity: 0;}
}

@keyframes favorites-add-btn {
	0% { opacity: 1;}
	100% { opacity: 0;}
}

@-webkit-keyframes favorites-added-btn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

@keyframes favorites-added-btn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.project-page.mellow-app section.favorites .tile_six {
	height: 391px;
}

.project-page.mellow-app section.favorites .tile_six img {
	margin: 0 auto;
	width: 161px;
}


.project-page.mellow-app section.manual-mode {
	background: white;
	display: block;
}

.project-page.mellow-app section.manual-mode .border {
	height: 1885px;
}

.project-page.mellow-app section.manual-mode .title {
	height: 310px;
	display: flex;
	vertical-align: middle;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.manual-mode .title img {
	margin: 0 auto;
	width: 319px;
}

.project-page.mellow-app section.manual-mode .tile_one, .project-page.mellow-app section.manual-mode .tile_two, .project-page.mellow-app section.manual-mode .tile_three {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.manual-mode .tile_one {
	height: 420px;
}

.project-page.mellow-app section.manual-mode .tile_one .wrap {
	width: 220px;
	height: 45px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: relative;
}

.project-page.mellow-app section.manual-mode .tile_one .wrap p {
	font-size: 14px;
	color: #4A4A4A;
	font-weight: 300;
	display: inline-block;
}

.project-page.mellow-app section.manual-mode .tile_one .wrap p.basic {
	margin-right: 48px;
	margin-left: 30px;
}

.project-page.mellow-app section.manual-mode .tile_one .wrap p.advanced {
	opacity: 0.5;
}

.project-page.mellow-app section.manual-mode .tile_one .wrap span {
	width: 70px;
	height: 28px;
	display: block;
	position: absolute;
	border: 1px solid #E1E1E1;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 25px;
}

.project-page.mellow-app section.manual-mode .tile_three {
	margin-top: -488px;
}

.project-page.mellow-app section.manual-mode .tile_five {
	margin-top: -487px;
	height: 485px;
}

.project-page.mellow-app section.manual-mode .tile_five img {
	margin: 0 auto;
	width: 127px;
}


.project-page.mellow-app section.manual-mode .tile_one.switch-animation .wrap p.basic {
	animation: manualmode-switch-basic 4s ease infinite;
}

.project-page.mellow-app section.manual-mode .tile_one.switch-animation .wrap p.advanced {
	animation: manualmode-switch-advanced 4s ease infinite;
}

.project-page.mellow-app section.manual-mode .tile_one.switch-animation .wrap span {
	animation: manualmode-switch-border 4s ease infinite;
}


@-webkit-keyframes manualmode-switch-border {
	0% { left: 25px; width: 70px; }
	15% { left: 118px; width: 105px; }
	50% {  left: 118px; width: 105px; }
	65% { left: 25px; width: 70px; }
	100% { left: 25px; width: 70px;}
}

@keyframes manualmode-switch-border {
	0% { left: 25px; width: 70px;}
	15% { left: 118px; width: 105px; }
	50% {  left: 118px; width: 105px; }
	65% { left: 25px; width: 70px; }
	100% { left: 25px; width: 70px;}
}

@-webkit-keyframes manualmode-switch-advanced {
	0% { opacity: 0.5; }
	15% { opacity: 1; }
	50% {  opacity: 1; }
	65% { opacity: 0.5; }
	100% { opacity: 0.5;}
}

@keyframes manualmode-switch-advanced {
	0% { opacity: 0.5; }
	15% { opacity: 1; }
	50% {  opacity: 1; }
	65% { opacity: 0.5; }
	100% { opacity: 0.5;}
}

@-webkit-keyframes manualmode-switch-basic {
	0% { opacity: 1; }
	15% { opacity: 0.5; }
	50% {  opacity: 0.5; }
	65% { opacity: 1; }
	100% { opacity: 1;}
}

@keyframes manualmode-switch-basic {
	0% { opacity: 1; }
	15% { opacity: 0.5; }
	50% {  opacity: 0.5; }
	65% { opacity: 1; }
	100% { opacity: 1;}
}



.project-page.mellow-app section.manual-mode .tile_four .item .screen {
	background: url('../images/mellow-app/manual-mode-advanced-three.png') no-repeat center -1px;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen {
	background: url('../images/mellow-app/manual-mode-advanced.png') no-repeat center -1px;
	overflow: hidden;
}

.project-page.mellow-app section.manual-mode .tile_two .item .screen {
	background: url('../images/mellow-app/manual-mode.png') no-repeat center -1px;
	overflow: hidden;
}

.project-page.mellow-app section.manual-mode .tile_two .item .screen .middle {
	top: 195px;
	/*transform: scale(0.9);*/
	position: absolute;
	left: 115px;
	opacity: 0;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.mellow-app section.manual-mode .tile_two .item .screen .middle.animate {
	/*transform: scale(1);*/
	opacity: 1;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}


.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen {
	width: 100%;
	height: 100%;
	display: block;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	background: url('../images/mellow-app/manual-mode-advanced-blur.jpg') no-repeat center -1px;
	opacity: 0;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen.animate .picker-screen .bg {
	animation: manualmode-picker-bg 1s ease forwards;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen.animate-off .picker-screen .bg {
	animation: manualmode-picker-bg-off 1s ease forwards;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .picker {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(285px);
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen.animate .picker-screen .picker {
	animation: manualmode-picker 1.5s ease forwards;
	animation-delay: 0.7s;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen.animate-off .picker-screen .picker {
	animation: manualmode-picker-off 1s ease forwards;
}



.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info {
	opacity: 0.5;
	width: 200px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 155px;
	opacity: 0;
	transform: translateY(-20px);
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen.animate .picker-screen .info {
	animation: manualmode-picker-info 1s ease forwards;
	animation-delay: 0.7s;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen.animate-off .picker-screen .info {
	animation: manualmode-picker-info-off 1s ease forwards;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info .text {
	font-size: 12px;
	color: white;
	font-weight: 400;
	line-height: 16px;
}

.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info .ps {
	font-size: 10px;
	color: white;
	font-weight: 400;
	line-height: 16px;
}

/*** PICKER BG ***/

@-webkit-keyframes manualmode-picker-bg {
	0% { opacity: 0; }
	100% { opacity: 1;}
}

@keyframes manualmode-picker-bg {
	0% { opacity: 0; }
	100% { opacity: 1;}
}

@-webkit-keyframes manualmode-picker-bg-off {
	0% { opacity: 1; }
	100% { opacity: 0;}
}

@keyframes manualmode-picker-bg-off {
	0% { opacity: 1; }
	100% { opacity: 0;}
}

/*** PICKER ***/

@-webkit-keyframes manualmode-picker {
	0% { transform: translateY(285px);}
	50% { transform: translateY(15px);}
	100% { transform: translateY(25px);}
}

@keyframes manualmode-picker {
	0% { transform: translateY(285px);}
	50% { transform: translateY(15px);}
	100% { transform: translateY(25px);}
}

@-webkit-keyframes manualmode-picker-off {
	0% { transform: translateY(25px);}
	100% { transform: translateY(285px);}
}

@keyframes manualmode-picker-off {
	0% { transform: translateY(25px);}
	100% { transform: translateY(285px);}
}


/*** PICKER INFO ***/

@-webkit-keyframes manualmode-picker-info {
	0% { opacity: 0; transform: translateY(-20px);}
	100% { opacity: 0.5; transform: translateY(0px);}
}

@keyframes manualmode-picker-info {
	0% { opacity: 0; transform: translateY(-20px);}
	100% { opacity: 0.5; transform: translateY(0px);}
}

@-webkit-keyframes manualmode-picker-info-off {
	0% { opacity: 0.5; transform: translateY(0px);}
	100% { opacity: 0; transform: translateY(-20px);}
}

@keyframes manualmode-picker-info-off {
	0% { opacity: 0.5; transform: translateY(0px);}
	100% { opacity: 0; transform: translateY(-20px);}
}





.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle {
	position: absolute;
	top: 235px;
	height: 110px;
	width: 450px;
	width: 450px;
	left: -78px;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box .temperature, .project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box .time {
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -0.19px;
	color: white;
	text-align: center;
	margin: 0;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box {
	display: inline-block;
	margin-right: 35px;
	width: 110px;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box .for {
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.82px;
	opacity: 0.5;
	color: white;
	text-transform: uppercase;
	margin-bottom: 5px;
	margin-top: 5px;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .change {
	color: #C39702;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.78px;
	text-transform: uppercase;
	border: 1px solid #C39702;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	max-width: 60px;
	margin: 20px auto 0;
	padding: 2px 1px;
	transform: translateY(20px);
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle.slide .change {
	animation: manual-mode-middle-change 0.5s ease forwards;
	animation-delay: 0.2s;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle.animate .box-1 {
	animation: manual-mode-middle-box-one 4s ease forwards;
	animation-delay: 0.2s;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box-2 {
	opacity: 0.3;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle.animate .box-2 {
	animation: manual-mode-middle-box-two 4s ease forwards;
	animation-delay: 0.2s;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle.animate .box-3 {
	animation: manual-mode-middle-box-three 4s ease forwards;
	animation-delay: 0.2s;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box-3 {
	margin: 0;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box-wrapper {
	transform: translate(150px, 20px);
	opacity: 0;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle.slide .box-wrapper {
	animation: manual-mode-middle-slide 0.5s ease forwards;
	animation-delay: 0.2s;
}

.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle.animate .box-wrapper {
	transform: translate(150px, 0px);
	animation: manual-mode-middle 4s ease forwards;
	animation-delay: 0.2s;
	opacity: 1;
}



/*** BOX SLIDE ***/


@-webkit-keyframes manual-mode-middle-slide {
	0% { transform: translate(150px, 20px); opacity: 0; }
	100% { transform: translate(150px, 0px); opacity: 1;}
}

@keyframes manual-mode-middle-slide {
	0% { transform: translate(150px, 20px); opacity: 0; }
	100% { transform: translate(150px, 0px); opacity: 1;}
}


/*** CHANGE BTN ***/

@-webkit-keyframes manual-mode-middle-change {
	0% { transform: translate(0px, 20px); opacity: 0; }
	100% { transform: translate(0px, 0px); opacity: 1;}
}

@keyframes manual-mode-middle-change {
	0% { transform: translate(0px, 20px); opacity: 0; }
	100% { transform: translate(0px, 0px); opacity: 1;}
}

/*** MIDDLE ANIMATION ***/

@-webkit-keyframes manual-mode-middle {
	0% { transform: translateX(150px); opacity: 1; }
	20% { transform: translateX(0px); opacity: 1; }
	25% { transform: translateX(0px); opacity: 1; }
	35% { transform: translateX(-160px); opacity: 1; }
	45% { transform: translateX(-150px); opacity: 1; }
	55% { transform: translateX(-150px); opacity: 1;}
	65% {  transform: translateX(10px); opacity: 1;}
	80% {  transform: translateX(0px); opacity: 1;}
	100% { transform: translateX(0px); opacity: 1;}
}

@keyframes manual-mode-middle {
	0% { transform: translateX(150px); opacity: 1; }
	20% { transform: translateX(0px); opacity: 1; }
	25% { transform: translateX(0px); opacity: 1; }
	35% { transform: translateX(-160px); opacity: 1; }
	45% { transform: translateX(-150px); opacity: 1; }
	55% { transform: translateX(-150px); opacity: 1;}
	65% {  transform: translateX(10px); opacity: 1;}
	80% {  transform: translateX(0px); opacity: 1;}
	100% { transform: translateX(0px); opacity: 1;}
}

@-webkit-keyframes manual-mode-middle-box-three {
	0% { opacity: 0.3; }
	20% { opacity: 0.3; }
	25% { opacity: 0.3; }
	35% { opacity: 1; }
	45% { opacity: 1; }
	55% { opacity: 1;}
	65% {  opacity: 0.3;}
	80% {  opacity: 0.3;}
	100% { opacity: 0.3;}
}

@keyframes manual-mode-middle-box-three {
	0% { opacity: 0.3; }
	20% { opacity: 0.3; }
	25% { opacity: 0.3; }
	35% { opacity: 1; }
	45% { opacity: 1; }
	55% { opacity: 1;}
	65% {  opacity: 0.3;}
	80% {  opacity: 0.3;}
	100% { opacity: 0.3;}
}

@-webkit-keyframes manual-mode-middle-box-two {
	0% { opacity: 0.3; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 0.3; }
	45% { opacity: 0.3; }
	55% { opacity: 0.3;}
	65% {  opacity: 1;}
	80% {  opacity: 1;}
	100% { opacity: 1;}
}

@keyframes manual-mode-middle-box-two {
	0% { opacity: 0.3; }
	20% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 0.3; }
	45% { opacity: 0.3; }
	55% { opacity: 0.3;}
	65% {  opacity: 1;}
	80% {  opacity: 1;}
	100% { opacity: 1;}
}

@-webkit-keyframes manual-mode-middle-box-one {
	0% {opacity: 1; }
	20% {opacity: 0.3; }
	25% {opacity: 0.3; }
	35% {opacity: 0.3; }
	45% {opacity: 0.3; }
	55% {opacity: 0.3;}
	65% {opacity: 0.3;}
	80% {opacity: 0.3;}
	100% {opacity: 0.3;}
}

@keyframes manual-mode-middle-box-one {
	0% {opacity: 1; }
	20% {opacity: 0.3; }
	25% {opacity: 0.3; }
	35% {opacity: 0.3; }
	45% {opacity: 0.3; }
	55% {opacity: 0.3;}
	65% {opacity: 0.3;}
	80% {opacity: 0.3;}
	100% {opacity: 0.3;}
}







.project-page.mellow-app section.cooking {
	background: white;
	display: block;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.cooking .main {
	height: 1625px;
	position: relative;
	overflow: hidden;
}

.project-page.mellow-app section.cooking .main .item {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.cooking .device {
	position: relative;
	display: block;
}


.project-page.mellow-app section.cooking .hardware {
	width: 334px;
	height: 668px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.project-page.mellow-app section.cooking .screen {
	width: 291px;
	height: 630px;
	position: absolute;
	top: 19px;
	left: 21px;
	overflow: hidden;
}

.project-page.mellow-app section.cooking .item.bg-change .screen .warm {
	background: url('../images/mellow-app/cooking-warm-bg.jpg') no-repeat center center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	animation: cooking-bg 5s ease forwards;
}


.project-page.mellow-app section.cooking .item.bg-change .screen .hot {
	background: url('../images/mellow-app/cooking-hot-bg.jpg') no-repeat center center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	animation: cooking-bg 5s ease forwards;
	animation-delay: 5s;
}


@-webkit-keyframes cooking-bg {
	0% { opacity: 0; }
	100% { opacity: 1;}
}

@keyframes cooking-bg {
	0% { opacity: 0; }
	100% { opacity: 1;}
}


.project-page.mellow-app section.cooking .item .screen .top .status-bar {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 10px;
	left: 19px;
}

.project-page.mellow-app section.cooking .item .screen .top .arrow {
	position: absolute;
	top: 45px;
	left: 15px;
}

.project-page.mellow-app section.cooking .item .screen .top .info {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 45px;
}

.project-page.mellow-app section.cooking .item .screen .top .info .cooking-status {
	position: relative;
	width: 100%;
}

.project-page.mellow-app section.cooking .item .screen .top .info .cooking-status p {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.27px;
	color: white;
	text-transform: uppercase;
	margin: 0px;
}

.project-page.mellow-app section.cooking .item-1 .screen .top .info .now-cooking {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0;
}

.project-page.mellow-app section.cooking .item .screen .top .info.manualmode .cooking-status p, .project-page.mellow-app section.cooking .item .screen .top .info.manualmode .doneneness {
	font-size: 11px;
}

.project-page.mellow-app section.cooking .item-1.animate .screen .top .info .waiting-to-cook {
	animation: waiting-to-cook 2s ease forwards;
	animation-delay: 1s;
}

.project-page.mellow-app section.cooking .item-1.animate .screen .top .info .now-cooking {
	animation: now-cooking 2s ease forwards;
	animation-delay: 1.5s;
}
	
	
	@-webkit-keyframes waiting-to-cook {
		0% { opacity: 1; }
		100% { opacity: 0;}
	}
	
	@keyframes waiting-to-cook {
		0% { opacity: 1; }
		100% { opacity: 0;}
	}
	
	@-webkit-keyframes now-cooking {
		0% { opacity: 0; }
		100% { opacity: 1;}
	}
	
	@keyframes now-cooking {
		0% { opacity: 0; }
		100% { opacity: 1;}
	}

.project-page.mellow-app section.cooking .item .screen .top .info .ingredient {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.37px;
	color: white;
	opacity: 0.8;
	margin-bottom: 0;
	margin-top: 10px;
}

.project-page.mellow-app section.cooking .item .screen .top .info .doneneness {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.28px;
	color: white;
	opacity: 0.8;
	margin-top: 5px;
}


.project-page.mellow-app section.cooking .item .screen .bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	margin: auto;
	transform: translateY(120px);
	opacity: 0;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease; 
}

.project-page.mellow-app section.cooking .item .screen .bottom.animate {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease; 
}

.project-page.mellow-app section.cooking .item .screen .bottom ul.dots {
	width: 34px;
	display: block;
	padding: 0;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li {
	width: 5px;
	height: 5px;
	background: white;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	display: inline-block;
	margin-right: 2px;
	margin-left: 0;
}

.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li.one {
	margin-left: 4px;
}

.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li.two {
	opacity: 0.5;
}

.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li.three {
	margin: 0;
	opacity: 0.5;
}

.project-page.mellow-app .item .screen .bottom .home-indicator {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7px;
	margin: auto;
	width: 105px;
	height: 4px;
}

.project-page.mellow-app section.cooking .item .screen .bottom .home-indicator {
	bottom: 13px;
}

.project-page.mellow-app section.cooking .item .screen .middle {
	position: absolute;
	top: 180px;
	width: 292px;
}

.project-page.mellow-app section.cooking .item-3 .screen .middle-wrap {
	height: 100%;
	width: 1000px;
	position: relative;
	z-index: 1;
	opacity: 0;
	margin-top: -10px;
}

.project-page.mellow-app section.cooking .item .screen .middle-wrap.animate {
	animation: cooking-middle 5s ease forwards;
}


@-webkit-keyframes cooking-middle {
	0% { transform: translateX(0); transform: translateY(20px); opacity: 0; }
	20% { transform: translateX(0); transform: translateY(0px); opacity: 1; }
	30% { transform: translateX(-270px); opacity: 1; }
	35% { transform: translateX(-270px); opacity: 1; }
	45% { transform: translateX(-550px); opacity: 1; }
	55% { transform: translateX(-540px); opacity: 1; }
	65% { transform: translateX(-540px); opacity: 1;}
	75% {  transform: translateX(-270px); opacity: 1;}
	80% {  transform: translateX(-270px); opacity: 1;}
	90% {  transform: translateX(10px); opacity: 1;}
	100% { transform: translateX(0); opacity: 1;}
}

@keyframes cooking-middle {
	0% { transform: translateX(0); transform: translateY(20px); opacity: 0; }
	20% { transform: translateX(0); transform: translateY(0px); opacity: 1; }
	30% { transform: translateX(-270px); opacity: 1; }
	35% { transform: translateX(-270px); opacity: 1; }
	45% { transform: translateX(-550px); opacity: 1; }
	55% { transform: translateX(-540px); opacity: 1; }
	65% { transform: translateX(-540px); opacity: 1;}
	75% {  transform: translateX(-270px); opacity: 1;}
	80% {  transform: translateX(-270px); opacity: 1;}
	90% {  transform: translateX(10px); opacity: 1;}
	100% { transform: translateX(0); opacity: 1;}
}

.project-page.mellow-app section.cooking .item .screen .middle {
	opacity: 0;
	transform: translateY(40px);
	-webkit-transition: all 1.5s ease; 
	-moz-transition: all 1.5s ease; 
	-o-transition: all 1.5s ease; 
	-ms-transition: all 1.5s ease; 
	transition: all 1.5s ease; 
}

.project-page.mellow-app section.cooking .item .screen .middle.animate {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transition: all 1.5s ease; 
	-moz-transition: all 1.5s ease; 
	-o-transition: all 1.5s ease; 
	-ms-transition: all 1.5s ease; 
	transition: all 1.5s ease; 
}

.project-page.mellow-app section.cooking .item .screen .middle.steps {
	top: 150px;
}

.project-page.mellow-app section.cooking .item-3 .screen .middle.steps {
	left: 270px;
	opacity: 1;
	transform: translateY(0px);
}

.project-page.mellow-app section.cooking .item .screen .middle.steps p.ready {
	font-size: 13px;
	color: white;
	font-weight: 400;
	text-align: center;
	margin-top: 60px;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps ul {
	display: block;
	width: 80%;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps ul, .project-page.mellow-app section.cooking .item .screen .middle.steps li {
	padding: 0;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li {
	list-style: none;
	display: block;
	position: relative;
	font-size: 12px;
	color: white;
	font-weight: 400;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 10px;
	opacity: 0.5;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li.active {
	opacity: 1;
	font-weight: 500;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li:nth-child(5) {
	opacity: 0.3;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li:last-child {
	opacity: 0.1;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li span {
	width: 100%;
	height: 1px;
	display: block;
	background: white;
	opacity: 0.2;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li .title {
	text-transform: uppercase;
}

.project-page.mellow-app section.cooking .item .screen .middle.steps li .desc {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
}

.project-page.mellow-app section.cooking .item .screen .middle .temperature .wrap, .project-page.mellow-app section.cooking .item .screen .middle .temperature {
	text-align: center;
}




.project-page.mellow-app section.cooking .item .screen .middle.graph {
	text-align: center;
	color: white;
	top: 165px;
}
.project-page.mellow-app section.cooking .item-3 .screen .middle.graph {
	left: 540px;
	opacity: 1;
	transform: translateY(0px);
}

.project-page.mellow-app section.cooking .item .screen .middle.graph .title {
	font-size: 12px;
	font-weight: 300;
	margin: 0;
}

.project-page.mellow-app section.cooking .item .screen .middle.graph .desc {
	font-size: 9px;
	font-size: 400;
	opacity: 0.5;
	margin-bottom: 20px;
}

.project-page.mellow-app section.cooking .item .screen .middle.graph .desc p {
	display: inline-block;
	margin-top: 5px;
}

.project-page.mellow-app section.cooking .item .screen .middle.graph .desc p:first-child {
	margin-right: 20px;
}


.project-page.mellow-app section.cooking .item .screen .middle .temperature h2 {
	margin: 0 auto;
	position: relative;
	display: inline-block;
}

.project-page.mellow-app section.cooking .item .screen .middle .temperature span {
	width: 8px;
	height: 8px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid white;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	margin-top: 12px;
	margin-left: 2px;
}


.project-page.mellow-app section.cooking .item .screen .middle h2 {
	font-size: 54px;
	font-weight: 300;
	color: white;
	letter-spacing: 0px;
	margin: 0;
	text-align: center;
}

.project-page.mellow-app section.cooking .item .screen .middle h3 {
	font-size: 12px;
	font-weight: 400;
	color: white;
	letter-spacing: 0.33px;
	margin: 0;
	text-align: center;
}

.project-page.mellow-app section.cooking .item .screen .middle .time {
	margin-top: 15px;
}

.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target {
	font-size: 11px;
	color: white;
	font-weight: 400;
	letter-spacing: 0.3px;
	margin: 0 auto;
	text-align: center;
	margin-top: 10px;
}

.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target .time {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, .2);
	padding: 2px 8px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	margin-right: 8px;
}

.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target .target {
	opacity: 0.4;
}


.project-page.mellow-app section.cooking .item-1 .screen {
	background: url('../images/mellow-app/cooking-cold-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.cooking .item-2 .screen {
	background: url('../images/mellow-app/cooking-warm-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.cooking .item-3 .screen {
	background: url('../images/mellow-app/cooking-cold-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.cooking .item-4 .screen {
	background: url('../images/mellow-app/cooking-warm-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.cooking .item-5 .screen {
	background: url('../images/mellow-app/cooking-hot-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.cooking .shadow {
	width: 308px;
	height: 645px;
	position: absolute;
	top: 20px;
	left: 22px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.project-page.mellow-app section.cooking .item {
	width: 334px;
	height: 668px;
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease; 
}


.project-page.mellow-app section.cooking .main .item-1 {
	left: -755px;
	top: -900px;
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	-o-transition: all 3s ease;
	-ms-transition: all 3s ease;
	transition: all 3s ease; 
	transform: translateY(0px);
}

.project-page.mellow-app section.cooking .main .item-1.slide {
	transform: translateY(75px);
	/*top: -750px;*/
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	-o-transition: all 3s ease;
	-ms-transition: all 3s ease;
	transition: all 3s ease; 
}



.project-page.mellow-app section.cooking .main .item-1 .shadow {
	-webkit-box-shadow: 30px 30px 30px 0px rgba(111,48,93,0.3);
	-moz-box-shadow: 30px 30px 30px 0px rgba(111,48,93,0.3);
	box-shadow: 30px 30px 30px 0px rgba(111,48,93,0.3);
}

.project-page.mellow-app section.cooking .main .item-2 {
	transform: rotate(90deg) translateY(0px);
	left: -1450px;
	bottom: -335px;
	-webkit-transition: all 2s ease; 
	-moz-transition: all 2s ease; 
	-o-transition: all 2s ease; 
	-ms-transition: all 2s ease; 
	transition: all 2s ease; 
}

.project-page.mellow-app section.cooking .main .item-2.animate {
	/*left: -1090px;*/
	transform: rotate(90deg) translateY(-180px);
	-webkit-transition: all 2s ease; 
	-moz-transition: all 2s ease; 
	-o-transition: all 2s ease; 
	-ms-transition: all 2s ease; 
	transition: all 2s ease; 
}

.project-page.mellow-app section.cooking .main .item-2 .shadow {
	-webkit-box-shadow: 30px -50px 30px 0px rgba(174,79,31,0.3);
	-moz-box-shadow: 30px -50px 30px 0px rgba(174,79,31,0.3);
	box-shadow: 30px -50px 30px 0px rgba(174,79,31,0.3);
}

.project-page.mellow-app section.cooking .main .item-3 .shadow {
	-webkit-box-shadow: 30px 30px 30px 0px rgba(27,117,172,0.3);
	-moz-box-shadow: 30px 30px 30px 0px rgba(27,117,172,0.3);
	box-shadow: 30px 30px 30px 0px rgba(27,117,172,0.3);
}


.project-page.mellow-app section.cooking .item .screen .top .arrow, .project-page.mellow-app section.cooking .item .screen .top .info {
	transform: translateY(-20px);
	opacity: 0;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease; 
}

.project-page.mellow-app section.cooking .item-1.animate .screen .top .arrow,
.project-page.mellow-app section.cooking .item-1.animate .screen .top .info,
.project-page.mellow-app section.cooking .item-2.animate .screen .top .arrow,
.project-page.mellow-app section.cooking .item-2.animate .screen .top .info,
.project-page.mellow-app section.cooking .item-3.animate .screen .top .arrow,
.project-page.mellow-app section.cooking .item-3.animate .screen .top .info,
.project-page.mellow-app section.cooking .item-4.animate .screen .top .arrow,
.project-page.mellow-app section.cooking .item-4.animate .screen .top .info,
.project-page.mellow-app section.cooking .item-5.animate .screen .top .arrow,
.project-page.mellow-app section.cooking .item-5.animate .screen .top .info {
	transform: translateY(0px);
	opacity: 1;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease; 
}


.project-page.mellow-app section.cooking .main .item-4 {
	transform: rotate(-90deg) translateY(0px);
	right: -1300px;
	top: -335px;
	-webkit-transition: all 3s ease; 
	-moz-transition: all 3s ease; 
	-o-transition: all 3s ease; 
	-ms-transition: all 3s ease; 
	transition: all 3s ease; 
}

.project-page.mellow-app section.cooking .main .item-4.slide {
	/*right: -1090px;*/
	transform: rotate(-90deg) translateY(-105px);
	-webkit-transition: all 3s ease; 
	-moz-transition: all 3s ease; 
	-o-transition: all 3s ease; 
	-ms-transition: all 3s ease; 
	transition: all 3s ease; 
}

.project-page.mellow-app section.cooking .main .item-4 .shadow {
	-webkit-box-shadow: -40px 30px 30px 0px rgba(174,79,31,0.3);
	-moz-box-shadow: -40px 30px 30px 0px rgba(174,79,31,0.3);
	box-shadow: -40px 30px 30px 0px rgba(174,79,31,0.3);
}

.project-page.mellow-app section.cooking .main .item-5 {
	right: -755px;
	bottom: -950px;
	-webkit-transition: all 3s ease; 
	-moz-transition: all 3s ease; 
	-o-transition: all 3s ease; 
	-ms-transition: all 3s ease; 
	transition: all 3s ease; 
	transform: translateY(0px);
}

.project-page.mellow-app section.cooking .main .item-5.animate {
	transform: translateY(-95px);
	/*bottom: -750px;*/
	-webkit-transition: all 3s ease; 
	-moz-transition: all 3s ease; 
	-o-transition: all 3s ease; 
	-ms-transition: all 3s ease; 
	transition: all 3s ease; 
}

.project-page.mellow-app section.cooking .main .item-5 .shadow {
	-webkit-box-shadow: 30px 30px 30px 0px rgba(111,48,93,0.3);
	-moz-box-shadow: 30px 30px 30px 0px rgba(111,48,93,0.3);
	box-shadow: 30px 30px 30px 0px rgba(111,48,93,0.3);
}


.project-page.mellow-app section.cooking .color-description {
	height: 430px;
	display: flex;
	vertical-align: middle;
	border-top: 1px solid #E1E1E1;
}

.project-page.mellow-app section.cooking .color-description .wrap {
	height: 335px;
	width: 100%;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}

.project-page.mellow-app section.cooking .color-description .wrap .grid-three {
	width: 33%;
	height: 100%;
	display: inline-block;
	position: relative;
}

.project-page.mellow-app section.cooking .color-description .wrap .item-6::before, .project-page.mellow-app section.cooking .color-description .wrap .item-7::before {
	content: '';
	width: 1px;
	height: 335px;
	background: #E1E1E1;
	position: absolute;
	display: block;
	top: 0;
	right: 0;
}

.project-page.mellow-app section.cooking .color-description .wrap .grid-three img {
	margin: 0 auto;
	display: block;
	margin-top: 95px;
	padding-left: 19px;
}

.project-page.mellow-app section.cooking .color-description .wrap .grid-three img, .project-page.mellow-app section.cooking .color-description .wrap .grid-three p {
	opacity: 0;
	transform: scale(0.5);
}

.project-page.mellow-app section.cooking .color-description.animate .wrap .grid-three img {
	animation: color-description 0.8s ease forwards;
}

.project-page.mellow-app section.cooking .color-description.animate .wrap .grid-three p {
	animation: color-description 1.2s ease forwards;
}

.project-page.mellow-app section.cooking .color-description.animate .wrap .item-7  img, .project-page.mellow-app section.cooking .color-description.animate .wrap .item-7 p {
	animation-delay: 0.2s;
}

.project-page.mellow-app section.cooking .color-description.animate .wrap .item-8  img, .project-page.mellow-app section.cooking .color-description.animate .wrap .item-8 p {
	animation-delay: 0.4s;
}

@-webkit-keyframes color-description {
	0% { transform: scale(0.5); 	opacity: 0;}
	100% { transform: scale(1); opacity: 1;}
}

@keyframes color-description {
	0% { transform: scale(0.5); 	opacity: 0;}
	100% { transform: scale(1); opacity: 1;}
}

.project-page.mellow-app section.cooking .color-description .wrap .grid-three p {
	color: #C7C7C7;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
}


.project-page.mellow-app section.finish {
	height: 980px;
	background: #F6F6F6;
	border-bottom: 1px solid #E1E1E1;
	position: relative;
	overflow: hidden;
}

.project-page.mellow-app section.finish .device {
	position: relative;
	display: block;
}


.project-page.mellow-app section.finish .hardware {
	width: 334px;
	height: 668px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.project-page.mellow-app section.finish .screen {
	width: 291px;
	height: 631px;
	position: absolute;
	top: 19px;
	left: 21px;
}

.project-page.mellow-app section.finish .item-1 .screen {
	background: url('../images/mellow-app/finish-suggestion.jpg') no-repeat center center;
}

.project-page.mellow-app section.finish .item-2 .screen {
	background: url('../images/mellow-app/finish-bg.jpg') no-repeat center center;
}

.project-page.mellow-app section.finish .item-3 .screen {
	background: url('../images/mellow-app/finish-keepwarm.jpg') no-repeat center center;
}

/*.project-page.mellow-app section.finish .shadow {
	width: 308px;
	height: 645px;
	position: absolute;
	top: 20px;
	left: 22px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	-moz-box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
	box-shadow: 30px 30px 30px 0px rgba(172,146,119,0.5);
}*/

.project-page.mellow-app section.finish .item {
	width: 334px;
	height: 668px;
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease; 
}

.project-page.mellow-app section.finish .item-1 {
	opacity: 0;
}

.project-page.mellow-app section.finish.vibrate .item-2 {
	animation: finish-vibrate 1s ease;
}

.project-page.mellow-app section.finish .item-2 .screen img, .project-page.mellow-app section.finish .item-2 .screen p {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	display: block;
}

.project-page.mellow-app section.finish .item-2 .screen .bag-illustration {
	width: 197px;
	height: 397px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .bag-illustration {
	animation: fade-in 2s ease forwards;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .bag-illustration #water {
	animation: fade-out 3s ease forwards;
	animation-delay: 1.5s;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .bag-illustration #water-wave {
	animation: water-fade-out 3s ease forwards;
	animation-delay: 1.5s;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .bag-illustration #bag {
	transform: translateY(0);
}

.project-page.mellow-app section.finish.animate .item-2 .screen .bag-illustration #bag {
	animation: bag-up 4s ease forwards;
	animation-delay: 2s;
}

.project-page.mellow-app section.finish .item-2 .screen .bag-text {
	font-size: 13px;
	color: white;
	font-weight: 300;
	width: 152px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	top: 380px;
	line-height: 20px;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .bag-text {
	animation: bag-text-up 4s ease forwards;
	animation-delay: 2s;
}

.project-page.mellow-app section.finish .item-2 .screen .success-icon {
	top: 150px;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .success-icon {
	animation: finish-success-icon 8s ease forwards;
	animation-delay: 2s;
}

.project-page.mellow-app section.finish .item-2 .screen .success-text {
	font-size: 14px;
	color: white;
	font-weight: 300;
	line-height: 20px;
	width: 178px;
	left: 0;
	right: 0;
	position: absolute;
	margin: auto;
	top: 210px;
	text-align: center;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .success-text {
	animation: success-text-up 1s ease forwards;
	animation-delay: 7.5s;
}

.project-page.mellow-app section.finish .item-2 .screen .success-suggestion {
	top: 280px;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .success-suggestion {
	animation: success-text-up 1s ease forwards;
	animation-delay: 7.8s;
}

.project-page.mellow-app section.finish .item-2 .screen .success-noteating {
	font-size: 11px;
	color: #8D8C8D;
	font-weight: 400;
	padding: 2px;
	border-bottom: 0.5px solid #8D8C8D;
	width: 105px;
	bottom: 110px;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .success-noteating {
	animation: success-text-up 1s ease forwards;
	animation-delay: 8.1s;
}

.project-page.mellow-app section.finish .item-2 .screen .success-btns {
	bottom: 45px;
	opacity: 0;
}

.project-page.mellow-app section.finish.animate .item-2 .screen .success-btns {
	animation: success-text-up 1s ease forwards;
	animation-delay: 8.5s;
}




/*** FADE OUT ***/

@-webkit-keyframes fade-out {
	0% { opacity: 1;}
	100% { opacity: 0;}
}

@keyframes fade-out {
	0% { opacity: 1;}
	100% { opacity: 0;}
}


/*** WATER-WAVE FADE OUT ***/

@-webkit-keyframes water-fade-out {
	0% { opacity: 0.4;}
	100% { opacity: 0;}
}

@keyframes water-fade-out {
	0% { opacity: 0.4;}
	100% { opacity: 0;}
}


/*** BAG UP ***/

@-webkit-keyframes bag-up {
	0% { transform: translateY(0px);opacity: 1;}
	50% { opacity: 1; }
	100% { transform: translateY(-70px); opacity: 0;}
}

@keyframes bag-up {
	0% { transform: translateY(0px);opacity: 1;}
	50% { opacity: 1; }
	100% { transform: translateY(-70px); opacity: 0;}
}


/*** TEXT UP ***/

@-webkit-keyframes bag-text-up {
	0% { transform: translateY(0px);opacity: 0;}
	50% { opacity: 1; }
	100% { transform: translateY(-70px); opacity: 0;}
}

@keyframes bag-text-up {
	0% { transform: translateY(0px);opacity: 0;}
	50% { opacity: 1; }
	100% { transform: translateY(-70px); opacity: 0;}
}

/*** FINISH SUCCESS ICON ***/

@-webkit-keyframes finish-success-icon {
	0% { transform: translateY(130px) scale(1.5); opacity: 0;}
	45% { transform: translateY(130px) scale(1.5); opacity: 0;}
	60% { transform: translateY(140px) scale(1);opacity: 1; }
	70% { transform: translateY(0px) scale(1);opacity: 1;}
	100% { transform: translateY(0px) scale(1);opacity: 1;}
}

@keyframes finish-success-icon {
	0% { transform: translateY(130px) scale(1.5); opacity: 0;}
	45% { transform: translateY(130px) scale(1.5); opacity: 0;}
	60% { transform: translateY(140px) scale(1);opacity: 1; }
	70% { transform: translateY(0px) scale(1);opacity: 1;}
	100% { transform: translateY(0px) scale(1);opacity: 1;}
}


/*** SUCCESS ELEMENTS UP ***/

@-webkit-keyframes success-text-up {
	0% { transform: translateY(30px);opacity: 0;}
	100% { transform: translateY(0px); opacity: 1;}
}

@keyframes success-text-up {
	0% { transform: translateY(30px);opacity: 0;}
	100% { transform: translateY(0px); opacity: 1;}
}




.project-page.mellow-app section.finish .item-3 {
	opacity: 0;
}

.project-page.mellow-app section.finish.slide .item-1 {
	/*left: -750px;
	opacity: 1;*/
	animation: finish-slide-left 2s ease forwards;
	animation-delay: 7s;
}

.project-page.mellow-app section.finish .item-1 .shadow, .project-page.mellow-app section.finish .item-3 .shadow {
	opacity: 0;
}

.project-page.mellow-app section.finish.slide .item-1 .shadow, .project-page.mellow-app section.finish.slide .item-3 .shadow {
	animation: finish-slide-shadow 2s ease forwards;
	animation-delay: 7s;
}

.project-page.mellow-app section.finish.slide .item-3 {
	/*right: -750px;
	opacity: 1;*/
	animation: finish-slide-right 2s ease forwards;
	animation-delay: 7s;
}

.project-page.mellow-app section.finish .item-2 .screen, .project-page.mellow-app section.finish .item-2 .hardware {
	z-index: 100;
}

@-webkit-keyframes finish-vibrate {
	0% { transform: translateX(0px); }
	10% { transform: translateX(3px); }
	20% {  transform: translateX(-3px); }
	30% { transform: translateX(3px); }
	40% { transform: translateX(-3px); }
	50% {  transform: translateX(3px); }
	60% { transform: translateX(-3px); }
	70% {  transform: translateX(3px); }
	80% { transform: translateX(-3px); }
	90% {  transform: translateX(3px); }
	100% { transform: translateX(0px); }
}

@keyframes finish-vibrate {
	0% { transform: translateX(0px); }
	10% { transform: translateX(3px); }
	20% {  transform: translateX(-3px); }
	30% { transform: translateX(3px); }
	40% { transform: translateX(-3px); }
	50% {  transform: translateX(3px); }
	60% { transform: translateX(-3px); }
	70% {  transform: translateX(3px); }
	80% { transform: translateX(-3px); }
	90% {  transform: translateX(3px); }
	100% { transform: translateX(0px); }
}

@-webkit-keyframes finish-slide-right {
	0% { right: 0; opacity: 0;}
	10% {right: 0; opacity: 1;}
	100% { right: -750px; opacity: 1;}
}

@keyframes finish-slide-right {
	0% { right: 0; opacity: 0;}
	10% {right: 0; opacity: 1;}
	100% { right: -750px; opacity: 1;}
}

@-webkit-keyframes finish-slide-left {
	0% { left: 0; opacity: 0;}
	10% {left: 0; opacity: 1;}
	100% { left: -750px; opacity: 1;}
}

@keyframes finish-slide-left {
	0% { left: 0; opacity: 0;}
	10% {left: 0; opacity: 1;}
	100% { left: -750px; opacity: 1;}
}

@-webkit-keyframes finish-slide-shadow {
	0% { opacity: 0;}
	10% { opacity: 0;}
	100% { opacity: 1;}
}

@keyframes finish-slide-shadow {
	0% { opacity: 0;}
	10% { opacity: 0;}
	100% { opacity: 1;}
}



.project-page.mellow-app section.history {
	background: white;
	position: relative;
	border-bottom: 1px solid #E1E1E1;
	display: block;
	overflow: hidden;
}

.project-page.mellow-app section.history .border {
	height: 2000px;
}

.project-page.mellow-app section.history .grid-two {
	position: relative;
}

.project-page.mellow-app section.history .tile_two .item .screen, .project-page.mellow-app section.history .tile_three .item .screen {
	background: url('../images/mellow-app/history-list.jpg') no-repeat center 32px;
}

.project-page.mellow-app section.history .tile_two.scroll .item .screen {
	animation: history-list-scroll 2s ease forwards;
}

.project-page.mellow-app section.history .tile_two.scroll-off .item .screen {
	animation: history-list-scroll-off 2s ease forwards;
}

@-webkit-keyframes history-list-scroll {
	0% { background-position-y: -260px; }
	80% { background-position-y: 42px; }
	100% { background-position-y: 32px; }
}

@keyframes history-list-scroll {
	0% { background-position-y: -260px; }
	80% { background-position-y: 42px; }
	100% { background-position-y: 32px; }
}

@-webkit-keyframes history-list-scroll-off {
	0% { background-position-y: 32px; }
	80% { background-position-y: -270px; }
	100% { background-position-y: -260px; }
}

@keyframes history-list-scroll-off {
	0% { background-position-y: 32px; }
	80% { background-position-y: -270px; }
	100% { background-position-y: -260px; }
}

.project-page.mellow-app section.history .device-tile .item .screen .wrap .top {
	width: 292px;
	height: 70px;
	background: url('../images/mellow-app/history-screen-top.png') no-repeat center center;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.history .device-tile .item .screen .wrap .bottom {
	width: 292px;
	height: 67px;
	background: url('../images/mellow-app/history-screen-bottom.png') no-repeat center center;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.history .tile_one, .project-page.mellow-app section.history .tile_two, .project-page.mellow-app section.history .tile_three {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.history .tile_one {
	height: 390px;
}

.project-page.mellow-app section.history .tile_one img {
	margin: 0 auto;
	width: 319px;
}

.project-page.mellow-app section.history .tile_three {
	margin-top: -518px;
}

.project-page.mellow-app section.history .tile_three .item .screen .wrap .popup {
	background: url('../images/mellow-app/history-popup.png') no-repeat center center;
	width: 100%;
	height: 284px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(290px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.history .tile_three.popup-shows .item .screen .wrap .popup {
	transform: translateY(0px);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.history .tile_three .item .transparency {
	width: 100%;
	height: 100%;
	background: black;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}

.project-page.mellow-app section.history .tile_three.popup-shows .item .transparency {
	opacity: 0.6;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; 
}


.project-page.mellow-app section.history .tile_four .item .screen {
	background: url('../images/mellow-app/history-detail.jpg') no-repeat center 32px;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease; 
}

.project-page.mellow-app section.history .tile_four.scroll .item .screen {
	animation: history-detail 1.5s ease forwards;
}

.project-page.mellow-app section.history .tile_four.scroll-off .item .screen {
	animation: history-detail-off 1s ease forwards;
}


@-webkit-keyframes history-detail {
	0% { background-position-y: 32px; }
	60% { background-position-y: -150px; }
	100% { background-position-y: -130px; }
}

@keyframes history-detail {
	0% { background-position-y: 32px; }
	60% { background-position-y: -150px; }
	100% { background-position-y: -130px; }
}

@-webkit-keyframes history-detail-off {
	0% { background-position-y: -130px; }
	80% { background-position-y: 42px; }
	100% { background-position-y: 32px; }
}

@keyframes history-detail-off {
	0% { background-position-y: -130px; }
	80% { background-position-y: 42px; }
	100% { background-position-y: 32px; }
}

.project-page.mellow-app section.history .tile_five {
	margin-top: -517px;
	height: 515px;
}

.project-page.mellow-app section.history .tile_five img {
	margin: 0 auto;
	align-self:flex-start;
	margin: auto;
	width: 180px;
}


/*** MORE ***/


.project-page.mellow-app section.more {
	background: white;
	display: block;
	z-index: 100;
	position: relative;
}

@media not all and (min-resolution:.001dpcm) { @media
{
    .project-page.mellow-app section.more {
    	-webkit-backdrop-filter: saturate(180%) blur(20px);
    	backdrop-filter: saturate(180%) blur(20px);
    	background-color: rgba(255,255,255,0.9);
    }
}}


.project-page.mellow-app section.more .border {
	height: 2485px;
}

.project-page.mellow-app section.more .title {
	height: 310px;
	display: flex;
	vertical-align: middle;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.more .title img {
	margin: 0 auto;
	width: 319px;
}

.project-page.mellow-app section.more .tile_one, .project-page.mellow-app section.more .tile_two, .project-page.mellow-app section.more .tile_three, .project-page.mellow-app section.more .tile_four {
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app section.more .tile_one .item .screen, .project-page.mellow-app section.more .tile_three .item .screen {
	background: url('../images/mellow-app/more.png') no-repeat center center;
}

.project-page.mellow-app section.more .tile_two {
	height: 515px;
}

.project-page.mellow-app section.more .tile_two img {
	align-self: flex-start;
	margin: auto;
	width: 175px;
}

/*.project-page.mellow-app section.more .tile_three .item .screen {
	background: url('../images/mellow-app/more.jpg') no-repeat center center;
}*/

.project-page.mellow-app section.more .tile_three .item .screen .wrap {
	background: url('../images/mellow-app/more-mellow-list.png') no-repeat center center;
	opacity: 0;
	-webkit-transition: all 0.5s ease; 
	-moz-transition: all 0.5s ease; 
	-o-transition: all 0.5s ease; 
	-ms-transition: all 0.5s ease; 
	transition: all 0.5s ease; 
}

.project-page.mellow-app section.more .tile_three.animation .item .screen .wrap {
	opacity: 1;
	-webkit-transition: all 0.5s ease; 
	-moz-transition: all 0.5s ease; 
	-o-transition: all 0.5s ease; 
	-ms-transition: all 0.5s ease; 
	transition: all 0.5s ease; 
}

.project-page.mellow-app section.more .tile_three .item .screen .wrap .mellow-device-list {
	background: url('../images/mellow-app/more-mellow-list-machines.png') no-repeat center center;
	width: 586px;
	height: 280px;
	display: block;
	position: absolute;
	top: 40px;
	bottom: 0;
	left: 145px;
	margin: auto;
	opacity: 0;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
	animation-delay: 2s;
}


.project-page.mellow-app section.more .tile_three.animation .item .screen .wrap .mellow-device-list {
	animation: more-mellow-devices 4s ease forwards;
	animation-delay: 0.5s;
}

.project-page.mellow-app section.more .tile_three.animation-off .item .screen .wrap .mellow-device-list {
	animation: more-mellow-devices-off 1s ease forwards;
}

@-webkit-keyframes more-mellow-devices {
	0% { left: 145px; opacity: 0; }
	20% { left: 55px; opacity: 1; }
	40% { left: 55px; opacity: 1; }
	50% { left: -148px; opacity: 1; }
	60% { left: -148px; opacity: 1; }
	70% { left: -345px; opacity: 1; }
	80% { left: -345px; opacity: 1; }
	100% { left: 55px; opacity: 1; }
}

@keyframes more-mellow-devices {
	0% { left: 145px; opacity: 0; }
	20% { left: 55px; opacity: 1; }
	40% { left: 55px; opacity: 1; }
	50% { left: -148px; opacity: 1; }
	60% { left: -148px; opacity: 1; }
	70% { left: -345px; opacity: 1; }
	80% { left: -345px; opacity: 1; }
	100% { left: 55px; opacity: 1; }
}

@-webkit-keyframes more-mellow-devices-off {
	0% { left: 55px; opacity: 1; }
	100% { left: 145px; opacity: 0; }
}

@keyframes more-mellow-devices-off {
	0% { left: 55px; opacity: 1; }
	100% { left: 145px; opacity: 0; }
}

.project-page.mellow-app section.more .device-tile .item .screen .wrap .bottom {
	width: 292px;
	height: 67px;
	background: url('../images/mellow-app/more-screen-bottom.png') no-repeat center center;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.project-page.mellow-app section.more .device-tile .item .screen .wrap .connected-message {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.mellow-app section.more .device-tile.animation .item .screen .wrap .connected-message {
	animation: more-connected-msg 2.5s ease forwards;
	animation-delay: 1s;
}

@-webkit-keyframes more-connected-msg {
	0% { bottom: 0px; opacity: 0; }
	10% { bottom: 78px; opacity: 1; }
	20% { bottom: 72px; opacity: 1; }
	80% { bottom: 72px; opacity: 1; }
	100% { bottom: 0px; opacity: 0;}
}

@keyframes more-connected-msg {
	0% { bottom: 0px; opacity: 0; }
	20% { bottom: 78px; opacity: 1; }
	30% { bottom: 72px; opacity: 1; }
	80% { bottom: 72px; opacity: 1; }
	100% { bottom: 0px; opacity: 0;}
}


.project-page.mellow-app section.more .device-tile .item .screen .wrap .disconnected, .project-page.mellow-app section.more .device-tile .item .screen .wrap .temperature {
	position: absolute;
	left: -5px;
	right: 0;
	top: 226px;
	margin: auto;
}

.project-page.mellow-app section.more .device-tile.animation .item .screen .wrap .disconnected {
	animation: more-disconnected 1s ease forwards;
	animation-delay: 0.5s;
}

.project-page.mellow-app section.more .device-tile .item .screen .wrap .temperature {
	opacity: 0;
}

.project-page.mellow-app section.more .device-tile.animation .item .screen .wrap .temperature {
	animation: more-temperature 1s ease forwards;
	animation-delay: 1s;
}

.project-page.mellow-app section.more .device-tile.animation-off .item .screen .wrap .temperature {
	animation: more-disconnected 1s ease forwards;
}

.project-page.mellow-app section.more .device-tile.animation-off .item .screen .wrap .disconnected {
	animation: more-temperature 3s ease forwards;
}


@-webkit-keyframes more-disconnected {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes more-disconnected {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@-webkit-keyframes more-temperature {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes more-temperature {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


.project-page.mellow-app section.more .tile_four {
	margin-top: -516px;
}

.project-page.mellow-app section.more .tile_four .item .screen .settings, .project-page.mellow-app section.more .tile_four .item .screen .devices, .project-page.mellow-app section.more .tile_four .item .screen .deviceinfo {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 350px;
}

.project-page.mellow-app section.more .tile_four .item .screen .wrap-transition {
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	opacity: 0.5;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}

.project-page.mellow-app section.more .tile_four.page-one .item .screen .wrap-transition {
	opacity: 0;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}


.project-page.mellow-app section.more .tile_four .item .screen {
	background: #FFFFFF url('../images/mellow-app/more-settings.png') no-repeat top;
	background-position-x: -40px;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}

.project-page.mellow-app section.more .tile_four.page-one .item .screen {
	background: #FFFFFF url('../images/mellow-app/more-settings.png') no-repeat top;
	background-position-x: center;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}

.project-page.mellow-app section.more .tile_four .item .screen .devices {
	background: #FFFFFF url('../images/mellow-app/more-settings-devices.png') no-repeat center top;
	left: 0px;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}

.project-page.mellow-app section.more .tile_four.page-one .item .screen .devices {
	left: 350px;
	/*-webkit-box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.3);
	box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.3);*/
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}

/*.project-page.mellow-app section.more .tile_four .item .screen .deviceinfo {
	background: #FFFFFF url('../images/mellow-app/more-settings-devices-mellowone.png') no-repeat center top;
	left: 295px;
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}

.project-page.mellow-app section.more .tile_four.page-two .item .screen .deviceinfo {
	left: 0px;
	/*-webkit-box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.5);
	box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.5);*!/
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease;  
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}*/

/*@-webkit-keyframes device {
	0% { left: 350px; }
	10% { left: 0px; }
	90% { left: 0px; }
	100% { left: 350px; }
}

@keyframes device {
	0% { left: 350px; }
	10% { left: 0px; }
	90% { left: 0px; }
	100% { left: 350px; }
}


@-webkit-keyframes device-info {
	0% { left: 350px; }
	10% { left: 0px; }
	70% { left: 0px; }
	80% { left: 350px; }
}

@keyframes device-info {
	0% { left: 350px; }
	10% { left: 0px; }
	70% { left: 0px; }
	80% { left: 350px; }
}*/


.project-page.mellow-app section.more .tile_five .item .screen .wrap .top {
	width: 292px;
	height: 70px;
	background: url('../images/mellow-app/more-top-familyguests.png') no-repeat center center;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}


.project-page.mellow-app section.more .tile_five .item .screen {
	background: #FFFFFF url('../images/mellow-app/more-familyandfriends.png') no-repeat center -220px;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease; 
}

.project-page.mellow-app section.more .tile_five.scroll .item .screen {
	animation: more-familyfriends 1.5s ease forwards;
}

.project-page.mellow-app section.more .tile_five.scroll-off .item .screen {
	animation: more-familyfriends-off 1s ease forwards;
}


@-webkit-keyframes more-familyfriends {
	0% { background-position-y: -220px; }
	60% { background-position-y: 20px; }
	100% { background-position-y: 0px; }
}

@keyframes more-familyfriends {
	0% { background-position-y: -220px; }
	60% { background-position-y: 20px; }
	100% { background-position-y: 0px; }
}


@-webkit-keyframes more-familyfriends-off {
	0% { background-position-y: 0px; }
	80% { background-position-y: -240px; }
	100% { background-position-y: -220px; }
}

@keyframes more-familyfriends-off {
	0% { background-position-y: 0px; }
	80% { background-position-y: -240px; }
	100% { background-position-y: -220px; }
}

.project-page.mellow-app section.more .tile_six {
	margin-top: -515px;
	height: 515px;
}

.project-page.mellow-app section.more .tile_six img {
	align-self: flex-start;
	margin: auto;
	width: 251px;
}




/*** MISCELLANEOUS ***/


.project-page.mellow-app section.miscellaneous {
	background: #F6F6F6 url('../images/mellow-app/miscellaneous.jpg') no-repeat center -20px;
	height: 1583px;
	border-bottom: 1px solid #E1E1E1;
	-webkit-transition: all 1.5s ease; 
	-moz-transition: all 1.5s ease; 
	-o-transition: all 1.5s ease; 
	-ms-transition: all 1.5s ease; 
	transition: all 1.5s ease; 
	margin-top: -200px;
}

.project-page.mellow-app section.miscellaneous.slide {
	background-position-y:  60px;
	-webkit-transition: all 1.5s ease; 
	-moz-transition: all 1.5s ease; 
	-o-transition: all 1.5s ease; 
	-ms-transition: all 1.5s ease; 
	transition: all 1.5s ease; 
}

.project-page.mellow-app section.miscellaneous.slide-more {
	background-position-y:  120px;
	-webkit-transition: all 1.5s ease; 
	-moz-transition: all 1.5s ease; 
	-o-transition: all 1.5s ease; 
	-ms-transition: all 1.5s ease; 
	transition: all 1.5s ease; 
}





/*** COMPOSITION ****/


.project-page.mellow-app .composition {
margin-top: -160px;
background: white;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #E1E1E1;
border-top: 1px solid #E1E1E1;
background: white;
z-index: 100;
position: relative;
}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media
{
    .project-page.mellow-app .composition {
    	-webkit-backdrop-filter: saturate(180%) blur(20px);
    	backdrop-filter: saturate(180%) blur(20px);
    	background-color: rgba(255,255,255,0.9);
    }
}}



.project-page.mellow-app .composition .column {
display: block;
float: left;
width: 50%;
vertical-align: top;
position: relative;
}

.project-page.mellow-app .composition .column.main-left .content {
border-right: 1px solid #E1E1E1;
}

.project-page.mellow-app .composition img, .project-page.mellow-app .composition svg {
	display: block;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.mellow-app .composition .text {
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.project-page.mellow-app .composition .column .content {
position: relative;
border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app .composition .column.main-left .content.row_one, .project-page.mellow-app .composition .column.main-right .content.row_six {
	height: 451px;
}

.project-page.mellow-app .composition .column.main-right .content.row_one, .project-page.mellow-app .composition .column.main-left .content.row_five {
	height: 200px;
	display: flex;
	margin: auto;
}

.project-page.mellow-app .composition .column.main-right .content.row_one p {
	text-transform: uppercase;
	text-align: center;
	text-size: 20px;
	font-weight: 500;
	color: #C39702;
	margin: auto;
	letter-spacing: 0.5px;
}

.project-page.mellow-app .composition .column .row_two, .project-page.mellow-app .composition .column.main-left .row_three, .project-page.mellow-app .composition .column.main-left .row_six {
height: 250px;
}

.project-page.mellow-app .composition .column.main-left .row_two .right svg #switch-circle {
	transform: translate(22px, 22px);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-page.mellow-app .composition .column.main-left .row_two .right.composition-switch-svg-on svg #switch-circle {
	transform: translate(55px, 22px);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}


.project-page.mellow-app .composition .column.main-left .row_two .right svg #switch-background {
	fill: #E1E1E1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
} 

.project-page.mellow-app .composition .column.main-left .row_two .right.composition-switch-svg-on svg #switch-background {
	fill: #C39702;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
} 

.project-page.mellow-app .composition .composition-grid-two .left, .project-page.mellow-app .composition .composition-grid-two .right {
width: 50%;
position: relative;
height: 100%;
}

.project-page.mellow-app .composition .composition-grid-two .left span {
height: 100%;
width: 1px;
position: absolute;
right: 0;
display: block;
background: #E1E1E1;
}

.project-page.mellow-app .composition .row_two .left {
	display: flex;
	margin: auto;
}

.project-page.mellow-app .composition .row_two .left p {
	font-size: 16px;
	letter-spacing: 0.44px;
	font-weight: 300;
	color: #C7C7C7;
	text-align: center;
	margin: auto;
	line-height: 25px;
}

.project-page.mellow-app .composition .column.main-right .row_three {
	height: 501px;
}

.project-page.mellow-app .composition .column.main-left .row_three svg {
	width: 395px;
	height: 66px;
}

.project-page.mellow-app .composition .column.main-right .row_three svg {
	width: 238px;
	height: 303px;
}

.project-page.mellow-app .composition .column.main-left .row_four {
	height: 490px;
}

.project-page.mellow-app .composition .column.main-left .row_four .right svg {
	width: 81px;
	height: 219px;
}

.project-page.mellow-app .composition .column.main-right .row_four {
	height: 319px;
}

.project-page.mellow-app .composition .column.main-right .row_four .right svg {
	width: 167px;
	height: 140px;
}

.project-page.mellow-app .composition .column.main-right .row_five {
	height: 170px;
}

.project-page.mellow-app .composition .column.main-right .row_five svg {
	width: 192px;
	height: 49px;
}

.project-page.mellow-app .composition .column.main-right .row_five svg text {
	transform: translate(50px, 30px);
	fill: #C39702;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.13px;
}


.project-page.mellow-app .composition .main-last {
	display: block;
	width: 100%;
	float: left;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.mellow-app .composition .main-last .wrap {
	width: 100%;
	margin: 0 auto;
}

.project-page.mellow-app .composition .main-last .icons {
	width: 12.5%;
	height: 200px;
	position: relative;
	float: left;
}

.project-page.mellow-app .composition .main-last .icons::before {
	content: '';
	width: 1px;
	height: 100%;
	background: #E1E1E1;
	position: absolute;
	display: block;
	top: 0;
	right: 0;
}






.project-page.mellow-app section#icon {
    min-height: 1643px;
    position: relative;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
		margin-top: -160px;
}

.project-page.mellow-app #icon>div:nth-of-type(1) {
    background: #F6F6F6 url(../images/mellow-app/miscellaneous.jpg) 50% 0 repeat-y;
    margin: 0;
    height: 1643px;
    position:absolute;
    width:100%;
    top:0;left:0;
    /*-webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;*/
}


.project-page.mellow-app section#icon .parallax .content {
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 100%;
}


.project-page.mellow-app .composition .column.main-right .content.row_six, .project-page.mellow-app .composition .column.main-left .row_six {
	border-bottom: none;
}

.project-page.mellow-app .composition .column.main-left .row_five svg text {
	transform: translate(20px, 27px);
	fill: #C39702;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0px;
}

.project-page.mellow-app .composition .column.main-right .content.row_six svg {
	width: 260px;
	height: 165px;
}

.project-page.mellow-app .composition .column.main-right .row_six svg #bag {
	transform: translate(83px, 0px);
}

.project-page.mellow-app .composition .column.main-right .row_six.animation svg #bag {
	-webkit-animation: composition-bag 2s infinite;
	-moz-animation:    composition-bag 2s infinite;
	-o-animation:      composition-bag 2s infinite; 
	animation:         composition-bag 2s infinite;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}

@-webkit-keyframes composition-bag {
	0% { transform: translate(83px, 0px);}
	50% { transform: translate(83px, -10px);}
	100% { transform: translate(83px, 0px);}
}

@keyframes composition-bag {
	0% { transform: translate(83px, 0px);}
	50% { transform: translate(83px, -10px);}
	100% { transform: translate(83px, 0px);}
}







/*** PMC WEBSITE ***/


.project-page.pmc-website section.intro .content .textbox {
  height: 280px;
}





.project-page.pmc-website section.work-pmc {
	margin-top: 170px;
	text-align: center;
}

.project-page.pmc-website section.work-pmc span.icon {
	width: 13px;
	height: 18px;
	display: block;
	background: url('../images/pmc-website/elements.png') -35px bottom no-repeat;
	margin: 0 auto 15px;
}

.project-page.pmc-website section.work-pmc span.arrow {
	width: 11px;
	height: 9px;
	display: block;
	background: url('../images/pmc-website/elements.png') -36px -77px no-repeat;
	margin: 15px auto 0;
}

.project-page.pmc-website section.work-pmc .content {
	margin-top: 20px;
}

.project-page.pmc-website section.work-pmc .workimg {
	position: relative;
	float: left;
	display: block;
	width: 530px;
	margin-top: 18px;
}

.project-page.pmc-website section.work-pmc .workimg img {
	width: 100%;	
}

.project-page.pmc-website section.work-pmc .workimg.first {
	margin-right: 20px;
}

.project-page.pmc-website section.work-pmc .workimg #hover1 {
	position: absolute;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-page.pmc-website section.work-pmc .workimg .wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	float: left;
	background-color: rgba(255, 255, 255, 0.5);
}

.project-page.pmc-website section.work-pmc .workimg p {
	color: #0040FF;
	margin: 150px auto 0;
	border: 2px solid #0040FF;
	padding: 20px;
	width: 60%;
}

.project-page.pmc-website section.work-pmc .working {
	display: inline-block;
	margin: 50px;
	vertical-align: middle;
	position: relative;
}

.project-page.pmc-website section.work-pmc .working div.hover {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 100px; right: 0;
	width: 100%;
	height: 100%;
	display: table;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-page.pmc-website section.work-pmc .working p {
	color: black;
	border: 2px solid black;
	padding: 20px;
	margin: 0 auto;
	width: 60%;
	vertical-align: middle;
}

.project-page.pmc-website section.work-pmc .working a:hover img {
	opacity: 0.1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-page.pmc-website section.work-pmc .working a:hover div.hover {
	opacity: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	top: 0; left: 0; bottom: 0; right: 0;
}

.project-page.pmc-website section.work-pmc .working img {
	width: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-page.pmc-website section.work-pmc .work-thebridge, .project-page.pmc-website section.work-pmc .work-museum, .project-page.pmc-website section.work-pmc .work-fashionweek, .project-page.pmc-website section.work-pmc .work-plotalot {
	position: relative;
}

.project-page.pmc-website section.work-pmc .work-thebridge .float-img {
	position: absolute;
	left: 0;
	top: 80px;
	-webkit-animation: thebridge 2s infinite; /* Safari 4+ */
	-moz-animation:    thebridge 2s infinite; /* Fx 5+ */
	-o-animation:      thebridge 2s infinite; /* Opera 12+ */
	animation:         thebridge 2s infinite; /* IE 10+ */
}

@-webkit-keyframes thebridge {
	0% { top: 60px;}
	50% { top: 100px;}
	100% { top: 60px;}
}

@keyframes thebridge {
	0% { top: 60px;}
	50% { top: 100px;}
	100% { top: 60px;}
}

.project-page.pmc-website section.work-pmc .work-museum .float-img {
	position: absolute;
	width: 130px;
	left: 0;
	bottom: 5px;
}

.project-page.pmc-website section.work-pmc .work-grass img {
	background: #f5f5f5 url('../images/pmc-website/work-grass.gif') no-repeat left top;
}

.project-page.pmc-website section.work-pmc .work-plotalot span {
	width: 130px;
	height: 130px;
	border: 10px solid black;
	position: absolute;
	bottom: 0;
	z-index: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	right: 61px;
}
	
.project-page.pmc-website section.work-pmc .work-plotalot a:hover span {
		opacity: 0.1;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	
	
	
/* WEBSITE MAC */



.project-page.pmc-website section.website-mac .bg {
	width: 100%;
	display: block;
	background-color: #f6f6f6;
	
}

.project-page.pmc-website .mac-screen-home .bg {
	height: 600px;
}

.project-page.pmc-website .mac-screen-project .bg {
	height: 850px;
	margin-top: -850px;
	opacity: 0;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website .mac-screen-project .bg.fadein {
	opacity: 1;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}
	
.project-page.pmc-website section.website-mac .screen {
	width: 100%;
	display: block;
	position: relative;
	z-index: 1000;
}

.project-page.pmc-website .mac-screen-home .screen {
	margin-top: -447px;
}

.project-page.pmc-website .mac-screen-project .screen {
	margin-top: 0px;
	opacity: 0;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website .mac-screen-project.scroll .screen {
	transform: translateY(-200px);
	opacity: 1;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website .mac-screen-project .base {
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website .mac-screen-project.scroll .base {
	transform: translateY(-200px);
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website section.website-mac .screen .border {
	width: 1285px;
	height: 735px;
	display: block;
	border: 17px solid black;
	margin: 0 auto;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

.project-page.pmc-website .mac-screen-home .screen .border {
	background: white url('../images/pmc-website/pmc-screen-test.png') no-repeat;
	background-size: cover;
	background-position: left top;
}

.project-page.pmc-website .mac-screen-project .screen .border {
	background: white url('../images/pmc-website/pmc-screen-project.jpg') no-repeat;
	background-size: cover;
	background-position: left -100px;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website .mac-screen-project .screen .border img {
	display: block;
	margin: 0 auto;
	margin-top: 25px;
}

.project-page.pmc-website .mac-screen-home .screen .border.scroll {
	background-position: left bottom;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

.project-page.pmc-website .mac-screen-project .screen .border.scroll {
	background-position: left top;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website section.website-mac .base {
	width: 100%;
	text-align: center;
	display: block;
	z-index: 100;
	position: relative;
}

.project-page.pmc-website section.website-mac .base img {
	display: block;
	margin: 0 auto;
}



/*** TRANSITION ***/


.project-page.pmc-website section.transition {
	background: url('../images/pmc-website/white-transition.png') repeat-x;
	width: 100%;
	height: 699px;
	display: block;
	z-index: 100;
	position: relative;
	margin-top: -700px;
	opacity: 0;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}

.project-page.pmc-website section.transition.fadein {
	opacity: 1;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}



/* COMPOSITION */


.project-page.pmc-website .composition {
	background: white;
/*	padding-top: 150px;
	padding-bottom: 150px;*/
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #E1E1E1;
	border-top: 1px solid #E1E1E1;
	min-height: 1000px;
}

.project-page.pmc-website .composition img {
	display: block;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.pmc-website .composition .column {
	display: block;
	float: left;
	width: 50%;
	vertical-align: top;
	position: relative;
}

.project-page.pmc-website .composition .column .content {
	position: relative;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.pmc-website .composition .column.main-left .content {
	border-right: 1px solid #E1E1E1;
}

.project-page.pmc-website .composition .column.main-left .content:last-child, .project-page.pmc-website .composition .column.main-right .content:last-child {
	border-bottom: none;
}

.project-page.pmc-website .composition .grid-two .left, .project-page.pmc-website .composition .grid-two .right {
	width: 50%;
	position: relative;
	height: 100%;
}

.project-page.pmc-website .composition .grid-two .left span {
	height: 100%;
	width: 1px;
	position: absolute;
	right: 0;
	display: block;
	background: #E1E1E1;
}

.project-page.pmc-website .composition .column .content.logo {
	height: 451px;
}

.project-page.pmc-website .composition .column .content.logo img {
	width: 218px;
}

.project-page.pmc-website .composition .column .desc-text, .project-page.pmc-website .composition .column .recipe-info {
	height: 250px;
}

.project-page.pmc-website .composition .column .desc-text {
	display: flex;
	margin: auto; 
}

.project-page.pmc-website .composition .column .desc-text .text {
	color: #999;
	font-size: 17px;
	line-height: 32px;
	width: 460px;
	text-align: center;
	margin: auto; /* Important */ 
	text-align: center; 
/*	height: 124px;*/
}

.project-page.pmc-website .composition .text {
	display: block;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.pmc-website .composition .column .btn {
	height: 255px;
	/*background: url('../images/pmc-website/download-btn-bg.jpg') repeat-x center center;
	background-size: cover;
	border: 30px solid white;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;*/
}

.project-page.pmc-website .composition .column .btn .wrap {
	width: 100%;
	height: 100%;
	background: url('../images/pmc-website/download-btn-bg.jpg') repeat-x center center;
	background-size: cover;
	margin: auto;
	border: 30px solid white;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.project-page.pmc-website .composition .column .logotype {
	height: 200px;
	display: flex;
	margin: auto; 
}

.project-page.pmc-website .composition .column .logotype img {
	width: 255px;
}

.project-page.pmc-website .composition .column .title-text .text {
	font-size: 41px;
	color: #C39702;
	text-align: center;
	margin: auto; /* Important */ 
	font-weight: 300;
}



.project-page.pmc-website .composition .column .cart-info, .project-page.pmc-website .composition .column .blue-box {
	height: 250px;
}

.project-page.pmc-website .composition .column .blue-box .blue-bg {
	width: 100%;
	height: 100%;
	background-color: #0040FF;
	margin: auto;
	border: 30px solid white;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
}

.project-page.pmc-website .composition .column .blue-box .blue-bg p {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	line-height: 35px;
	width: 550px;
	height: 70px;
	margin: auto;
	color: white;
	vertical-align: middle;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.project-page.pmc-website .composition .column .nav-icons {
	height: 505px;
}


.project-page.pmc-website .composition .column .nav-cart .mobile {
	display: none;
}







/******** PMC IDENTITY ***********/



.project-page.pmc-identity section.intro .content .textbox {
  height: 250px;
}

.project-page.pmc-identity section.creation {
	display: block;
	width: 100%;
	height: 1200px;
	background: white;
	position: relative;
	border-bottom: 1px solid #EEE;
	border-top: 1px solid #EEE;
}

.project-page.pmc-identity section.creation img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	max-width: 1440px;
}


.project-page.pmc-identity section.logo.logotype {
	height: 480px;
	border-bottom: 1px solid #EEE;
}

.project-page.pmc-identity section.logo.logotype img {
	max-width: 400px;
}

.project-page.pmc-identity .logo-versions .left, .project-page.pmc-identity .logo-versions .right {
	height: 490px;
	position: relative;
}


.project-page.pmc-identity .logo-versions .left img, .project-page.pmc-identity .logo-versions .right img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.project-page.pmc-identity .logo-versions .right .divider {
	position: absolute;
	height: 100%;
	display: block;
	width: 1px;
	background: #EEE;
	top: 0;
}

.project-page.pmc-identity section#font .left, .project-page.pmc-identity section#font .right {
	margin-top: 120px;
}

.project-page.pmc-identity .related-project .image img {
	margin-top: 50px;
	margin-bottom: 50px;
}


/*.project-page.pmc-identity section#font img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 140px;
	padding-top: 60px;
}*/


/*.project-page.pmc-identity section.id-composition, .project-page section#font {
	background-color: #0040FF;
	background: #0040FF;
}*/









/***** WODER WEBSITE ******/



.project-page.woder-website section.intro .content .textbox {
	height: 220px;
}


.project-page.woder-website .img-panels .main, .project-page.woder-website .img-panels .content {
	height: 680px;
	width: 100%;
	display: block;
}


.project-page.woder-website .img-panels .content-wrap {
	background: #F6F6F6;
	padding-bottom: 100px;
}

.project-page.woder-website .img-panels .main-1 {
	background: #F6F6F6 url('../images/woder-website/main-1.jpg') no-repeat center bottom;
	height: 75px;
	display: block;
}

.project-page.woder-website .img-panels .main-2 {
	background: #F6F6F6 url('../images/woder-website/main-2.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .main-3 {
	background: #F6F6F6 url('../images/woder-website/main-3.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .main-4 {
	background: #F6F6F6 url('../images/woder-website/main-4.jpg') no-repeat center center;
}


.project-page.woder-website .img-panels .content-1 {
	background: #F6F6F6 url('../images/woder-website/content-1.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-2 {
	background: #F6F6F6 url('../images/woder-website/content-2.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-3 {
	background: #F6F6F6 url('../images/woder-website/content-3.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-4 {
	background: #F6F6F6 url('../images/woder-website/content-4.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-5 {
	background: #F6F6F6 url('../images/woder-website/content-5.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-6 {
	background: #F6F6F6 url('../images/woder-website/content-6.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-7 {
	background: #F6F6F6 url('../images/woder-website/content-7.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-8 {
	background: #F6F6F6 url('../images/woder-website/content-8.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-9 {
	background: #F6F6F6 url('../images/woder-website/content-9.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-10 {
	background: #F6F6F6 url('../images/woder-website/content-10.jpg') no-repeat center center;
}

.project-page.woder-website .img-panels .content-11 {
	background: #F6F6F6 url('../images/woder-website/content-11.jpg') no-repeat center center;
}


.project-page.woder-website .composition .column .nav-icons {
	height: 500px;
}

.project-page.woder-website .composition .column .btn {
	height: 250px;
}






/******* CODE ROOF *****/

.project-page.coderoof section.intro .content .textbox {
	height: 250px;
}

/*.project-page.coderoof .floating-words {
	height: 985px;
	background-color: #2A3276;
}*/

body.coderoof section#floating-words {
    min-height: 900px;
    position: relative;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.coderoof #floating-words>div:nth-of-type(1) {
    background: #2A3276 url(../images/coderoof/floating-words-bg.png) 50% 0 repeat;
    margin: 0;
    height: 900px;
    position:absolute;
    width:100%;
    top:0;left:0;
    /*-webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;*/
}


body.coderoof section#floating-words .parallax .content {
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
  height: 100%;
}

body.coderoof section#floating-words .parallax .content img {
  position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

body.coderoof section.logo-versions {
	border-bottom: 1px solid #EEE;
}






/*** ABOUT ***/

body.about section.content {
	width: 100%;
	display: block;
}

body.about section.content .wrap {
	padding-top: 240px;
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}

body.about section.content .bg-about-me {
	width: 100%;
	height: 790px;
	display: block;
	background: #f6f6f6;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: bgfade 1s ease forwards;
	-moz-animation: bgfade 1s ease forwards;
	-o-animation: bgfade 1s ease forwards;
	animation: bgfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .30s;
	-moz-animation-delay: .30s;
	-o-animation-delay: .30s;
	animation-delay: .30s;
}


@-webkit-keyframes bgfade {
    0%   {opacity:0; transform: translateY(-60px);}
    100% {opacity:1; transform: translateY(0px);}
}

/* Standard syntax */
@keyframes bgfade {
    0%   {opacity:0; transform: translateY(-60px);}
    100% {opacity:1; transform: translateY(0px);}
}

body.about section.content .text-block  {
	width: 415px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 120px;
	position: relative;
	z-index: 10;
	
}


body.about section.content .text-block p.about-me {
	-webkit-animation-delay: .10s;
	-moz-animation-delay: .10s;
	-o-animation-delay: .10s;
	animation-delay: .10s;
}

body.about section.content .text-block p.about-me {
	-webkit-animation-delay: .10s;
	-moz-animation-delay: .10s;
	-o-animation-delay: .10s;
	animation-delay: .10s;
}

body.about section.content .text-block p.recognition {
	margin-top: 320px;
	-webkit-animation-delay: .30s;
	-moz-animation-delay: .30s;
	-o-animation-delay: .30s;
	animation-delay: .30s;
}



body.about section.content .text-block p {
	font-weight: 700;
	letter-spacing: 3px;
	font-size: 9px;
	text-transform: uppercase;
	line-height: 25px;
	width: 100%;
	-webkit-animation: textboxfade 1s ease forwards;
	-moz-animation: textboxfade 1s ease forwards;
	-o-animation: textboxfade 1s ease forwards;
	animation: textboxfade 1s ease forwards;
	opacity: 0;
}

body.about section.content .text-block p span.grey {
	color: #9B9B9B;
}

body.about section.content .text-block span.signature {
	width: 130px;
	height: 111px;
	background: url('../images/about/about-signature.png') no-repeat left top;
	display: block;
	top: 225px;
	left: 145px;
	position: absolute;
	cursor: url('../images/about/drag-icon.svg'), auto;	
	
	-webkit-animation: textboxfade 1s ease forwards;
	-moz-animation: textboxfade 1s ease forwards;
	-o-animation: textboxfade 1s ease forwards;
	animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .30s;
	-moz-animation-delay: .30s;
	-o-animation-delay: .30s;
	animation-delay: .30s;
	
}

body.about section.content .text-block span.signature-mobile {
	display: none;
}

body.about section.content .bullet-separator {
	margin-top: 80px;
	margin-bottom: 80px;
	-webkit-animation: textboxfade 1s ease forwards;
	-moz-animation: textboxfade 1s ease forwards;
	-o-animation: textboxfade 1s ease forwards;
	animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .20s;
	-moz-animation-delay: .20s;
	-o-animation-delay: .20s;
	animation-delay: .20s;
}

body.about section.content a, body.about section.content a:active, body.about section.content a:after, body.about section.content a:focus {
	color: #0000FF;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

body.about section.content a:hover {
	opacity: 0.5;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}



body.about section.content p.recognition span {
	color: #B2B2B2;
}

body.about section.content .about-pic {
	-webkit-animation: textboxfade 1s ease forwards;
	-moz-animation: textboxfade 1s ease forwards;
	-o-animation: textboxfade 1s ease forwards;
	animation: textboxfade 1s ease forwards;
	opacity: 0;
}

body.about section.content .instagram {
	font-size: 9px;
	letter-spacing: 3px;
	font-weight: 700;
	position: absolute;
	top: 1080px;
	right: 145px;
	text-transform: uppercase;
	-webkit-animation: textboxfade 1s ease forwards;
	-moz-animation: textboxfade 1s ease forwards;
	-o-animation: textboxfade 1s ease forwards;
	animation: textboxfade 1s ease forwards;
	opacity: 0;
	-webkit-animation-delay: .90s;
	-moz-animation-delay: .90s;
	-o-animation-delay: .90s;
	animation-delay: .90s;
	z-index: 1000;
}



body.about section.content .about-pic-one {
	position: absolute;
	top: 320px;
	left: -115px;
	-webkit-animation-delay: .50s;
	-moz-animation-delay: .50s;
	-o-animation-delay: .50s;
	animation-delay: .50s;
}

body.about section.content .about-pic-two {
	position: absolute;
	top: 660px;
	right: -200px;
	-webkit-animation-delay: .70s;
	-moz-animation-delay: .70s;
	-o-animation-delay: .70s;
	animation-delay: .70s;
}

body.about section.content .about-pic-three {
	position: absolute;
	top: 1155px;
	left: 0px;
	-webkit-animation-delay: .90s;
	-moz-animation-delay: .90s;
	-o-animation-delay: .90s;
	animation-delay: .90s;
}

body.about section.content .about-pic-four {
	position: absolute;
	top: 1580px;
	right: 0px;
	-webkit-animation-delay: 1.10s;
	-moz-animation-delay: 1.10s;
	-o-animation-delay: 1.10s;
	animation-delay: 1.10s;
}

body.about section.content .about-pic-five {
	margin-top: 110px;
	margin-bottom: 120px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	-webkit-animation-delay: 1.30s;
	-moz-animation-delay: 1.30s;
	-o-animation-delay: 1.30s;
	animation-delay: 1.30s;
}





/******* IX WEBSITE ********/



.project-page.ix-website section.intro .content .textbox {
	height: 220px;
}

.project-page.ix-website .img-panels .main {
	height: 605px;
	width: 100%;
	display: block;
	
}

.project-page.ix-website .img-panels .main-wrap {
	background: white url('../images/ix-website/ix-website-main-bg.jpg') repeat-x left bottom;
}


.project-page.ix-website .img-panels .content {
	height: 680px;
	width: 100%;
	display: block;
}


.project-page.ix-website .img-panels .content-wrap {
	background: #F6F6F6;
	padding-bottom: 100px;
}



.project-page.ix-website .img-panels .main-1 {
	background: #F6F6F6 url('../images/ix-website/ix-website-1.jpg') no-repeat center bottom;
	height: 301px;
	display: block;
}

.project-page.ix-website .img-panels .main-2 {
	background: url('../images/ix-website/ix-website-2.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .main-3 {
	background: url('../images/ix-website/ix-website-3.jpg') no-repeat center center;
}


.project-page.ix-website .img-panels .content-1 {
	background: #F6F6F6 url('../images/ix-website/ix-website-4.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-2 {
	background: #F6F6F6 url('../images/ix-website/ix-website-5.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-3 {
	background: #F6F6F6 url('../images/ix-website/ix-website-6.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-4 {
	background: #F6F6F6 url('../images/ix-website/ix-website-7.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-5 {
	background: #F6F6F6 url('../images/ix-website/ix-website-8.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-6 {
	background: #F6F6F6 url('../images/ix-website/ix-website-9.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-7 {
	background: #F6F6F6 url('../images/ix-website/ix-website-10.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-8 {
	background: #F6F6F6 url('../images/ix-website/ix-website-11.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-9 {
	background: #F6F6F6 url('../images/ix-website/ix-website-12.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-10 {
	background: #F6F6F6 url('../images/ix-website/ix-website-13.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-11 {
	background: #F6F6F6 url('../images/ix-website/ix-website-14.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-12 {
	background: #F6F6F6 url('../images/ix-website/ix-website-15.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-13 {
	background: #F6F6F6 url('../images/ix-website/ix-website-16.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-14 {
	background: #F6F6F6 url('../images/ix-website/ix-website-17.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-15 {
	background: #F6F6F6 url('../images/ix-website/ix-website-18.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-16 {
	background: #F6F6F6 url('../images/ix-website/ix-website-19.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-17 {
	background: #F6F6F6 url('../images/ix-website/ix-website-20.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-18 {
	background: #F6F6F6 url('../images/ix-website/ix-website-21.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-19 {
	background: #F6F6F6 url('../images/ix-website/ix-website-22.jpg') no-repeat center center;
}

.project-page.ix-website .img-panels .content-20 {
	background: #F6F6F6 url('../images/ix-website/ix-website-23.jpg') no-repeat center center;
	height: 866px;
}


.project-page.ix-website .composition .column .nav-icons {
	height: 500px;
}

.project-page.ix-website .composition .column .btn {
	height: 250px;
}






/******* IX APP ********/


.project-page.ix-app .app-icon {
	height: 400px;
	text-align: center;
	background: #f6f6f6;
	display: block;
	padding-top: 50px;
	padding-bottom: 50px;
}

.project-page.ix-app .app-icon img {
	display: block;
	margin: 0 auto;
}


.project-page.ix-app .ios .ios-main {
	height: 698px;
	width: 100%;
	display: block;
}


.project-page.ix-app .ios .ios-main.content-1 {
	background: #F6F6F6 url('../images/ix-app/ix-ios-main-1.jpg') no-repeat center center;
}

.project-page.ix-app .ios .ios-main.content-2 {
	background: #F6F6F6 url('../images/ix-app/ix-ios-main-2.jpg') no-repeat center center;
}


.project-page.ix-app .ios-screens .ios-main {
	height: 62px;
	width: 100%;
	display: block;
	position: absolute;
}

.project-page.ix-app .ios-screens .ios-main.content-3 {
	background: url('../images/ix-app/ix-ios-main-3.png') no-repeat center center;
}

.project-page.ix-app section.ios-screens {
width: 100%;
background: white;

border-bottom: 1px solid #E1E1E1;
display: block;
overflow: hidden;
position: relative;
}

.project-page.ix-app section.ios-screens .content {
float: left;
width: 100%;
display: table-cell;
min-height: 10px;
}

.project-page.ix-app section.ios-screens .border {
	height: 4000px;
}

.project-page.ix-app section.ios-screens .tile_one, .project-page.ix-app section.ios-screens .tile_two {
	border-top: 1px solid #E1E1E1;
}

.project-page.ix-app section.ios-screens .tile_two, .project-page.ix-app section.ios-screens .tile_four, .project-page.ix-app section.ios-screens .tile_six {
	border-bottom: 1px solid #E1E1E1;
}


.project-page.ix-app section.ios-screens .grid-two.tile_one {
	height: 420px;
	vertical-align: middle;
	display: flex;
	margin: auto;
	position: relative;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app .title h2 {
	color: black;
}

.project-page.ix-app section.ios-screens .device-tile .device-body {
	margin: 0 auto;
}


.project-page.ix-app section.ios-screens .tile_three, .project-page.ix-app section.ios-screens .tile_five, .project-page.ix-app section.ios-screens .tile_seven {
margin-top: -475px;
border-bottom: 1px solid #E1E1E1;
}


.project-page.ix-app section.ios-screens .tile_eight {
height: 895px;
overflow: hidden;
background: url('../images/ix-app/ios-group.jpg') no-repeat center bottom;
padding-bottom: 0;
position: relative;
}

.project-page.ix-app section.ios-screens .tile_nine {
margin-top: -592px;
height: 592px;
padding: 0;
position: relative;
}

.project-page.ix-app section.ios-screens .tile_nine img {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}




.project-page.ix-app section.android {
	background: white;
}

.project-page.ix-app section.android .border {
height: 3806px;
}

.project-page.ix-app section.android .title {
	display: flex;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app section.android .title-pairing {
	height: 330px;
}


.project-page.ix-app section.android .device-tile .device-body {
margin: 0 auto;
}


.project-page.ix-app section.android .tile_two {
height: 420px;
position: relative;
display: flex;
vertical-align: middle;
border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app section.android .tile_two img, .project-page.ix-app section.android .tile_nine img {
margin: 0 auto;
}

.project-page.ix-app section.android .tile_one, .project-page.ix-app section.android .tile_three, .project-page.ix-app section.android .tile_four, .project-page.ix-app section.android .tile_five, .project-page.ix-app section.android .tile_six, .project-page.ix-app section.android .tile_seven {
border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app section.android .tile_four, .project-page.ix-app section.android .tile_six, .project-page.ix-app section.android .tile_eight {
margin-top: -422px;
}

.project-page.ix-app section.android .tile_nine {
height: 353px;
position: relative;
display: flex;
vertical-align: middle;
}

.project-page.ix-app section.android .tile_eight {
height: 895px;
overflow: hidden;
background: url('../images/ix-app/android-7.jpg') no-repeat center bottom;
padding-bottom: 0;
position: relative;
}







.project-page.ix-app section.windows {
	background: white;
}

.project-page.ix-app section.windows .border {
height: 3806px;
}

.project-page.ix-app section.windows .title {
	display: flex;
	border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app section.windows .title-pairing {
	height: 330px;
}


.project-page.ix-app section.windows .device-tile .device-body {
margin: 0 auto;
}


.project-page.ix-app section.windows .tile_one {
height: 420px;
position: relative;
display: flex;
vertical-align: middle;
border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app section.windows .tile_one img, .project-page.ix-app section.windows .tile_nine img {
margin: 0 auto;
}

.project-page.ix-app section.windows .tile_one, .project-page.ix-app section.windows .tile_two, .project-page.ix-app section.windows .tile_three, .project-page.ix-app section.windows .tile_four, .project-page.ix-app section.windows .tile_five, .project-page.ix-app section.windows .tile_six, .project-page.ix-app section.windows .tile_seven {
border-bottom: 1px solid #E1E1E1;
}

.project-page.ix-app section.windows .tile_three, .project-page.ix-app section.windows .tile_five, .project-page.ix-app section.windows .tile_seven {
margin-top: -465px;
}

.project-page.ix-app section.windows .tile_nine {
height: 595px;
margin-top: -595px;
position: relative;
display: flex;
vertical-align: middle;
}

.project-page.ix-app section.windows .tile_eight {
height: 895px;
overflow: hidden;
background: url('../images/ix-app/windowsphone-7.jpg') no-repeat center bottom;
padding-bottom: 0;
position: relative;
}





/******* EDP WEBSITE ********/



.project-page.edp-website section.intro .content .textbox {
	height: 220px;
}

.project-page.edp-website .img-panels .main {
	height: 649px;
	width: 100%;
	display: block;
	
}

.project-page.edp-website .img-panels .main-wrap {
	background: white url('../images/ix-website/ix-website-main-bg.jpg') repeat-x left bottom;
}


.project-page.edp-website .img-panels .content {
	height: 680px;
	width: 100%;
	display: block;
}


.project-page.edp-website .img-panels .content-wrap {
	background: #F6F6F6;
	padding-bottom: 100px;
}



.project-page.edp-website .img-panels .main-1 {
	background: #F6F6F6 url('../images/edp-website/edp-website-1.jpg') no-repeat center bottom;
	height: 401px;
	display: block;
}

.project-page.edp-website .img-panels .main-2 {
	background: url('../images/edp-website/edp-website-2.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .main-3 {
	background: url('../images/edp-website/edp-website-3.jpg') no-repeat center center;
}


.project-page.edp-website .img-panels .content-1 {
	background: #F6F6F6 url('../images/edp-website/edp-website-4.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-2 {
	background: #F6F6F6 url('../images/edp-website/edp-website-5.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-3 {
	background: #F6F6F6 url('../images/edp-website/edp-website-6.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-4 {
	background: #F6F6F6 url('../images/edp-website/edp-website-7.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-5 {
	background: #F6F6F6 url('../images/edp-website/edp-website-8.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-6 {
	background: #F6F6F6 url('../images/edp-website/edp-website-9.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-7 {
	background: #F6F6F6 url('../images/edp-website/edp-website-10.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-8 {
	background: #F6F6F6 url('../images/edp-website/edp-website-11.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-9 {
	background: #F6F6F6 url('../images/edp-website/edp-website-12.jpg') no-repeat center center;
}

.project-page.edp-website .img-panels .content-10 {
	background: #F6F6F6 url('../images/edp-website/edp-website-13.jpg') no-repeat center center;
	height: 503px;
}


.project-page.edp-website .composition .column .nav-icons {
	height: 500px;
}

.project-page.edp-website .composition .column .btn {
	height: 250px;
}





/****** Miscellaneous ******/


.project-page.miscellaneous section.work.intro {
	padding-top: 0;
	padding-bottom: 0;
}

.project-page.miscellaneous section.work.intro .project {
	width: 235px;
	margin-bottom: 0;
	margin-right: 35px;
	margin-left: 35px;
}

.project-page.miscellaneous section.work.intro .project.one {
	margin-left: 0;
}

.project-page.miscellaneous section.work.intro .project.three {
	margin-right: 0;
}

/*.project-page.miscellaneous section.intro .content .textbox {
	padding-top: 95px;
}*/

.project-page.miscellaneous section.intro .content .textbox p {
	opacity: 1;
}

.project-page section.intro .content .textbox span {
	display: inline-block;
	margin-bottom: 0;
}

.project-page.miscellaneous section.intro .content .textbox {
	width: 100%;
	height: 370px;
}

.project-page.miscellaneous section.intro .content .textbox h2 {
	margin-bottom: 60px;
}



section.work .miscellaneous-projectload {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: workfade 1s ease forwards;
         -moz-animation: workfade 1s ease forwards;
           -o-animation: workfade 1s ease forwards;
              animation: workfade 1s ease forwards;
  }










/*body.about #top, body.about #bottom, body.about #left, body.about #right {
	background: #0000FF;
	position: fixed;
	z-index: 1000000;
	}
	body.about #left, body.about #right {
		top: 0; bottom: 0;
		width: 20px;
		}
		body.about #left { left: 0; }
		body.about #right { right: 0; }
		
	body.about #top, body.about #bottom {
		left: 0; right: 0;
		height: 20px;
		}
		body.about #top { top: 0; }
		body.about #bottom { bottom: 0; }*/