/*  RETINA IMAGES */
@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {

	.project-page.one section.intro .content .textbox span, .project-page.entry section.selection .wrap .left span {
		background-image: url('../images/one@2x.png');
		-webkit-background-size: 40px;
		-moz-background-size: 40px;
		-o-background-size: 40px;
		background-size: 40px;
	}
	
	.project-page.two section.intro .content .textbox span, .project-page.entry section.selection .wrap .right span {
		background-image: url('../img-2/two@2x.png');
		-webkit-background-size: 40px;
		-moz-background-size: 40px;
		-o-background-size: 40px;
		background-size: 40px;
	}
	
	.project-page section.intro .content .arrow {
		background-image: url('../images/arrow@2x.png');
		-webkit-background-size: 21px;
		-moz-background-size: 21px;
		-o-background-size: 21px;
		background-size: 21px;
	}
	
	.project-page.one section#composition {
	  background-image: url('../images/composition5@2x.png');
	  -webkit-background-size: 1425px;
	  -moz-background-size: 1425px;
	  -o-background-size: 1425px;
	  background-size: 1425px;
	}
	
	.project-page.two section#composition {
	  background-image: url('../img-2/composition@2x.png');
	  -webkit-background-size: 1426px;
	  -moz-background-size: 1426px;
	  -o-background-size: 1426px;
	  background-size: 1426px;
	}
	
	.project-page.one section#font {
	  background-image: url('../images/llbrownfont@2x.png');
	  -webkit-background-size: 757px;
	  -moz-background-size: 757px;
	  -o-background-size: 757px;
	  background-size: 757px;
	}
	
	.project-page.two section#font {
	  background-image: url('../img-2/fonts@2x.png');
	  -webkit-background-size: 956px;
	  -moz-background-size: 956px;
	  -o-background-size: 956px;
	  background-size: 956px;
	}
	
	.project-page.wandle-identity section.flowing-mobile .content {
	  background-image: url('../images/wandle-identity/flowing-mobile@2x.png');
	  -webkit-background-size: 400px;
	  -moz-background-size: 400px;
	  -o-background-size: 400px;
	  background-size: 400px;
	}
	
	body.two .border-top {
	  background-image: url('../img-2/border@2x.png');
	  -webkit-background-size: 369px;
	  -moz-background-size: 369px;
	  -o-background-size: 369px;
	  background-size: 369px;
	}
	
	body.two .border-bottom {
	  background-image: url('../img-2/borderbottom@2x.png');
	  -webkit-background-size: 369px;
	  -moz-background-size: 369px;
	  -o-background-size: 369px;
	  background-size: 369px;
	}
	
	#flowing>div:nth-of-type(2) {
	  background-image: url('../images/wandle-identity/flow1@2x.png');
	  -webkit-background-size: 486px;
	  -moz-background-size: 486px;
	  -o-background-size: 486px;
	  background-size: 486px;
	}
	
	#flowing>div:nth-of-type(3) {
	  background-image: url('../images/wandle-identity/flow2@2x.png');
	  -webkit-background-size: 251px;
	  -moz-background-size: 251px;
	  -o-background-size: 251px;
	  background-size: 251px;
	}
	
	#flowing>div:nth-of-type(4) {
	  background-image: url('../images/wandle-identity/flow3@2x.png');
	  -webkit-background-size: 612px;
	  -moz-background-size: 612px;
	  -o-background-size: 612px;
	  background-size: 612px;
	}
	
	
	
	
	/*** MELLOW APP ***/
	
	.project-page.mellow-app section.app-img-intro {
		background-image: url('../images/mellow-app/mellow-app-intro-img-5@2x.jpg');
		-webkit-background-size: 2530px;
		-moz-background-size: 2530px;
		-o-background-size: 2530px;
		background-size: 2530px;
	}
	
	
	.project-page.mellow-app section.signup-login .tile_four .wrap {
		background-image: url('../images/mellow-app/signinsignup-all@2x.jpg');
		-webkit-background-size: 1285px;
		-moz-background-size: 1285px;
		-o-background-size: 1285px;
		background-size: 1285px;
	}
	
	
	.project-page.mellow-app section.onboarding {
		background-image: url('../images/mellow-app/onboarding@2x.jpg');
		-webkit-background-size: 1755px;
		-moz-background-size: 1755px;
		-o-background-size: 1755px;
		background-size: 1755px;
	}
	
	.project-page.mellow-app .device .hardware {
		background-image: url('../images/mellow-app/device-frame@2x.png');
		-webkit-background-size: 334px;
		-moz-background-size: 334px;
		-o-background-size: 334px;
		background-size: 334px;
	}
	
	.project-page.mellow-app section.home .home-iphone .wrap-shadow .middle {
		background-image: url('../images/mellow-app/home-screen@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;
	}
	
	
	.project-page.mellow-app #icon>div:nth-of-type(1) {
		background-image: url(../images/mellow-app/miscellaneous@2x.jpg);
		-webkit-background-size: 2000px;
		-moz-background-size: 2000px;
		-o-background-size: 2000px;
		background-size: 2000px;
	}
	
	.project-page.mellow-app section.signup-login .signuplogin-welcome {
		background-image: url('../images/mellow-app/signup-welcome-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;
	}
	
	.project-page.mellow-app section.signup-login .signuplogin-login {
		background-image: url('../images/mellow-app/signup-login-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;
	}
	
	
	.project-page.mellow-app section.home .notification .item .device .screen .notification-screen {
		background-image: url('../images/mellow-app/home-details-notifications@2x.png');
		-webkit-background-size: 402px;
		-moz-background-size: 402px;
		-o-background-size: 402px;
		background-size: 402px;
	}
	
	.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 {
		background-image: url('../images/mellow-app/home-details-screen@2x.jpg');
		-webkit-background-size: 402px;
		-moz-background-size: 402px;
		-o-background-size: 402px;
		background-size: 402px;
	}
	
	.project-page.mellow-app .device-closeup .item .device .hardware {
		background-image: url('../images/mellow-app/device-frame-cut@2x.png');
		-webkit-background-size: 460px;
		-moz-background-size: 460px;
		-o-background-size: 460px;
		background-size: 460px;
	}
	
	.project-page.mellow-app section.ingredient-selection .item-1 .screen {
		background-image: url('../images/mellow-app/ingredient-selection-list@2x.jpg');
		-webkit-background-size: 291px;
		-moz-background-size: 291px;
		-o-background-size: 291px;
		background-size: 291px;
	}
	
	.project-page.mellow-app section.ingredient-selection .item-2 .screen {
		background-image: url('../images/mellow-app/ingredient-selection-bg@2x.jpg');
		-webkit-background-size: 291px;
		-moz-background-size: 291px;
		-o-background-size: 291px;
		background-size: 291px;
	}
	
	.project-page.mellow-app section.ingredient-selection .item-3 .screen {
		background-image: url('../images/mellow-app/ingredient-selection-settime@2x.jpg');
		-webkit-background-size: 291px;
		-moz-background-size: 291px;
		-o-background-size: 291px;
		background-size: 291px;
	}
	
	.project-page.mellow-app section.favorites .tile_two .item .screen {
		background-image: url('../images/mellow-app/favorites-list-screen@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;
	}
	
	.project-page.mellow-app section.favorites .tile_four .item .top-screen {
		background-image: url('../images/mellow-app/favorites-add-category@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.favorites .tile_three .item .screen .middle, .project-page.mellow-app section.favorites .tile_four .item .screen .middle {
		background-image: url('../images/mellow-app/favorites-empty@2x.jpg');
		-webkit-background-size: 202px;
		-moz-background-size: 202px;
		-o-background-size: 202px;
		background-size: 202px;
	}
	
	.project-page.mellow-app section.favorites .tile_five .item .screen {
		background-image: url('../images/mellow-app/favorites-add-ingredient@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	.project-page.mellow-app section.manual-mode .tile_four .item .screen {
		background-image: url('../images/mellow-app/manual-mode-advanced-three@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.manual-mode .tile_three .item .screen {
		background-image: url('../images/mellow-app/manual-mode-advanced@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.manual-mode .tile_two .item .screen {
		background-image: url('../images/mellow-app/manual-mode@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .bg {
		background-image: url('../images/mellow-app/manual-mode-advanced-blur@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.cooking .item.bg-change .screen .warm {
		background-image: url('../images/mellow-app/cooking-warm-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	.project-page.mellow-app section.cooking .item.bg-change .screen .hot {
		background-image: url('../images/mellow-app/cooking-hot-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.cooking .item-1 .screen {
		background-image: url('../images/mellow-app/cooking-cold-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.cooking .item-2 .screen {
		background-image: url('../images/mellow-app/cooking-warm-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.cooking .item-3 .screen {
		background-image: url('../images/mellow-app/cooking-cold-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.cooking .item-4 .screen {
		background-image: url('../images/mellow-app/cooking-warm-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.cooking .item-5 .screen {
		background-image: url('../images/mellow-app/cooking-hot-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	.project-page.mellow-app section.finish .item-1 .screen {
		background-image: url('../images/mellow-app/finish-suggestion@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.finish .item-2 .screen {
		background-image: url('../images/mellow-app/finish-bg@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.finish .item-3 .screen {
		background-image: url('../images/mellow-app/finish-keepwarm@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.history .tile_two .item .screen, .project-page.mellow-app section.history .tile_three .item .screen {
		background-image: url('../images/mellow-app/history-list@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.history .device-tile .item .screen .wrap .top {
		background: url('../images/mellow-app/history-screen-top@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.history .device-tile .item .screen .wrap .bottom {
		background: url('../images/mellow-app/history-screen-bottom@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	.project-page.mellow-app section.history .tile_three .item .screen .wrap .popup {
		background-image: url('../images/mellow-app/history-popup@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.history .tile_four .item .screen {
		background-image: url('../images/mellow-app/history-detail@2x.jpg');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.more .tile_one .item .screen, .project-page.mellow-app section.more .tile_three .item .screen {
		background-image: url('../images/mellow-app/more@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.more .tile_three .item .screen .wrap {
		background-image: url('../images/mellow-app/more-mellow-list@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.more .tile_three .item .screen .wrap .mellow-device-list {
		background-image: url('../images/mellow-app/more-mellow-list-machines@2x.png');
		-webkit-background-size: 586px;	
		-moz-background-size: 586px;	
		-o-background-size: 586px;	
		background-size: 586px;	
	}
	
	.project-page.mellow-app section.more .device-tile .item .screen .wrap .bottom {
		background-image: url('../images/mellow-app/more-screen-bottom@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	.project-page.mellow-app section.more .tile_four .item .screen {
		background-image: url('../images/mellow-app/more-settings@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.more .tile_four.page-one .item .screen {
		background-image: url('../images/mellow-app/more-settings@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.more .tile_four .item .screen .devices {
		background-image: url('../images/mellow-app/more-settings-devices@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	.project-page.mellow-app section.more .tile_five .item .screen .wrap .top {
		background-image: url('../images/mellow-app/more-top-familyguests@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	.project-page.mellow-app section.more .tile_five .item .screen {
		background-image:  url('../images/mellow-app/more-familyandfriends@2x.png');
		-webkit-background-size: 292px;
		-moz-background-size: 292px;
		-o-background-size: 292px;
		background-size: 292px;	
	}
	
	
	
	
	/*** IX APP ***/
	
	
	.project-page.ix-app .ios .ios-main.content-1 {
		background-image:  url('../images/ix-app/ix-ios-main-1@2x.jpg');
		-webkit-background-size: 1221px;
		-moz-background-size: 1221px;
		-o-background-size: 1221px;
		background-size: 1221px;
	}
	
	.project-page.ix-app .ios .ios-main.content-2 {
		background-image:  url('../images/ix-app/ix-ios-main-2@2x.jpg');
		-webkit-background-size: 1221px;
		-moz-background-size: 1221px;
		-o-background-size: 1221px;
		background-size: 1221px;
	}
	
	.project-page.ix-app .ios-screens .ios-main.content-3 {
		background-image:  url('../images/ix-app/ix-ios-main-3@2x.png');
		-webkit-background-size: 549px;
		-moz-background-size: 549px;
		-o-background-size: 549px;
		background-size: 549px;
	}
	
	
	
	
	.project-page.ix-app section.ios-screens .tile_eight {
	
	background-image:  url('../images/ix-app/ios-group@2x.jpg');
	-webkit-background-size: 1822px;
	-moz-background-size: 1822px;
	-o-background-size: 1822px;
	background-size: 1822px;
	}
	
	
	.project-page.ix-app section.android .tile_eight {
	background-image:  url('../images/ix-app/android-7@2x.jpg');
	-webkit-background-size: 1818px;
	-moz-background-size: 1818px;
	-o-background-size: 1818px;
	background-size: 1818px;
	}
	
	
	.project-page.ix-app section.windows .tile_eight {
	background-image:  url('../images/ix-app/windowsphone-7@2x.jpg');
	-webkit-background-size: 1746px;
	-moz-background-size: 1746px;
	-o-background-size: 1746px;
	background-size: 1746px;
	}
	
	
	
	
	
	
	/**** IX WEBSITE ***/
	
	
	.project-page.ix-website .img-panels .main-1 {
		background: #F6F6F6 url('../images/ix-website/ix-website-1@2x.jpg') no-repeat center bottom;
	-webkit-background-size: 1816px;
	-moz-background-size: 1816px;
	-o-background-size: 1816px;
	background-size: 1816px;
	}
	
	
	.project-page.ix-website .img-panels .main-2 {
	background: url('../images/ix-website/ix-website-2@2x.jpg') no-repeat center center;
	-webkit-background-size: 1816px;
	-moz-background-size: 1816px;
	-o-background-size: 1816px;
	background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .main-3 {
	background: url('../images/ix-website/ix-website-3@2x.jpg') no-repeat center center;
	-webkit-background-size: 1816px;
	-moz-background-size: 1816px;
	-o-background-size: 1816px;
	background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-1 {
		background: #F6F6F6 url('../images/ix-website/ix-website-4@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-2 {
		background: #F6F6F6 url('../images/ix-website/ix-website-5@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-3 {
		background: #F6F6F6 url('../images/ix-website/ix-website-6@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-4 {
		background: #F6F6F6 url('../images/ix-website/ix-website-7@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-5 {
		background: #F6F6F6 url('../images/ix-website/ix-website-8@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-6 {
		background: #F6F6F6 url('../images/ix-website/ix-website-9@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-7 {
		background: #F6F6F6 url('../images/ix-website/ix-website-10@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-8 {
		background: #F6F6F6 url('../images/ix-website/ix-website-11@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-9 {
		background: #F6F6F6 url('../images/ix-website/ix-website-12@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-10 {
		background: #F6F6F6 url('../images/ix-website/ix-website-13@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-11 {
		background: #F6F6F6 url('../images/ix-website/ix-website-14@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-12 {
		background: #F6F6F6 url('../images/ix-website/ix-website-15@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-13 {
		background: #F6F6F6 url('../images/ix-website/ix-website-16@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-14 {
		background: #F6F6F6 url('../images/ix-website/ix-website-17@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-15 {
		background: #F6F6F6 url('../images/ix-website/ix-website-18@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-16 {
		background: #F6F6F6 url('../images/ix-website/ix-website-19@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-17 {
		background: #F6F6F6 url('../images/ix-website/ix-website-20@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-18 {
		background: #F6F6F6 url('../images/ix-website/ix-website-21@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-19 {
		background: #F6F6F6 url('../images/ix-website/ix-website-22@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.ix-website .img-panels .content-20 {
		background: #F6F6F6 url('../images/ix-website/ix-website-23@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	
	
	
	
	
	/*** EDP WEBSITE ***/
	
	.project-page.edp-website .img-panels .main-1 {
	background-image:  url('../images/edp-website/edp-website-1@2x.jpg');
	-webkit-background-size: 1816px;
	-moz-background-size: 1816px;
	-o-background-size: 1816px;
	background-size: 1816px;
	}
	
	.project-page.edp-website .img-panels .main-2 {
	background-image:  url('../images/edp-website/edp-website-2@2x.jpg');
	-webkit-background-size: 1816px;
	-moz-background-size: 1816px;
	-o-background-size: 1816px;
	background-size: 1816px;
	}
	
	.project-page.edp-website .img-panels .main-3 {
	background-image:  url('../images/edp-website/edp-website-3@2x.jpg');
	-webkit-background-size: 1816px;
	-moz-background-size: 1816px;
	-o-background-size: 1816px;
	background-size: 1816px;
	}
	
	
	.project-page.edp-website .img-panels .content-1 {
		background: #F6F6F6 url('../images/edp-website/edp-website-4@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.edp-website .img-panels .content-2 {
		background: #F6F6F6 url('../images/edp-website/edp-website-5@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-3 {
		background: #F6F6F6 url('../images/edp-website/edp-website-6@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-4 {
		background: #F6F6F6 url('../images/edp-website/edp-website-7@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-5 {
		background: #F6F6F6 url('../images/edp-website/edp-website-8@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-6 {
		background: #F6F6F6 url('../images/edp-website/edp-website-9@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-7 {
		background: #F6F6F6 url('../images/edp-website/edp-website-10@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-8 {
		background: #F6F6F6 url('../images/edp-website/edp-website-11@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-9 {
		background: #F6F6F6 url('../images/edp-website/edp-website-12@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
		
	}
	
	.project-page.edp-website .img-panels .content-10 {
		background: #F6F6F6 url('../images/edp-website/edp-website-13@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	
	
	
	
	/***** WODER WEBSITE *****/
	
	
	.project-page.woder-website .img-panels .main-1 {
		background: #F6F6F6 url('../images/woder-website/main-1@2x.jpg') no-repeat center center;
		-webkit-background-size: 2750px;
		-moz-background-size: 2750px;
		-o-background-size: 2750px;
		background-size: 2750px;
	}
	
	
	.project-page.woder-website .img-panels .main-2 {
		background: #F6F6F6 url('../images/woder-website/main-2@2x.jpg') no-repeat center center;
		-webkit-background-size: 2750px;
		-moz-background-size: 2750px;
		-o-background-size: 2750px;
		background-size: 2750px;
	}
	
	.project-page.woder-website .img-panels .main-3 {
		background: #F6F6F6 url('../images/woder-website/main-3@2x.jpg') no-repeat center center;
		-webkit-background-size: 2750px;
		-moz-background-size: 2750px;
		-o-background-size: 2750px;
		background-size: 2750px;
	}
	
	.project-page.woder-website .img-panels .main-4 {
		background: #F6F6F6 url('../images/woder-website/main-4@2x.jpg') no-repeat center center;
		-webkit-background-size: 2750px;
		-moz-background-size: 2750px;
		-o-background-size: 2750px;
		background-size: 2750px;
	}
	
	
	.project-page.woder-website .img-panels .content-1 {
		background: #F6F6F6 url('../images/woder-website/content-1@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	
	.project-page.woder-website .img-panels .content-2 {
		background: #F6F6F6 url('../images/woder-website/content-2@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	
	.project-page.woder-website .img-panels .content-3 {
		background: #F6F6F6 url('../images/woder-website/content-3@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	
	.project-page.woder-website .img-panels .content-4 {
		background: #F6F6F6 url('../images/woder-website/content-4@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-5 {
		background: #F6F6F6 url('../images/woder-website/content-5@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-6 {
		background: #F6F6F6 url('../images/woder-website/content-6@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-7 {
		background: #F6F6F6 url('../images/woder-website/content-7@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-8 {
		background: #F6F6F6 url('../images/woder-website/content-8@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-9 {
		background: #F6F6F6 url('../images/woder-website/content-9@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-10 {
		background: #F6F6F6 url('../images/woder-website/content-10@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	.project-page.woder-website .img-panels .content-11 {
		background: #F6F6F6 url('../images/woder-website/content-11@2x.jpg') no-repeat center center;
		-webkit-background-size: 1816px;
		-moz-background-size: 1816px;
		-o-background-size: 1816px;
		background-size: 1816px;
	}
	
	
	
	
	/********  CODE ROOF ********/
	
	body.coderoof #floating-words>div:nth-of-type(1) {
		background: #2A3276 url(../images/coderoof/floating-words-bg@2x.png) 50% 0 repeat;
		-webkit-background-size: 1606px;
		-moz-background-size: 1606px;
		-o-background-size: 1606px;
		background-size: 1606px;
	}
	
	
	
	
	
	/**** ABOUT *****/
	
	
	body.about section.content .text-block span.signature {
		background: url('../images/about/about-signature@2x.png') no-repeat left top;
		-webkit-background-size: 128px;
		-moz-background-size: 128px;
		-o-background-size: 128px;
		background-size: 128px;
	}
	
	
	
}	
	
	
	

/*  DESKTOP 
================================================== */

@media screen and (min-width: 1120px) { 
	.row {width: 1080px; margin: 0 auto; padding-right: 20px; padding-left: 20px;
	}
}


/*  DESKTOP 
================================================== */

@media screen and (min-width: 960px) and (max-width: 1119px) { 
	.row {width: 920px; margin: 0 auto; padding-right: 20px;
	padding-left: 20px;}
	
	
	.project-page section#composition {
	  -webkit-background-size: 900px;
	  -moz-background-size: 900px;
	  -o-background-size: 900px;
	  background-size: 900px;
	}
	
	.project-page section.id-composition img {
		max-width: 900px;
	}
	
	.project-page section#font .left, .project-page section#font .right {
	  margin-top: 180px;
	}
	
	
	
	/*** MELLOW IDENTITY ***/
	
	
	
	.project-page.mellow-identity .id-sketches img {
	position: absolute;
	}
	
	.project-page.mellow-identity .id-sketches img.main {
	height: 230px;
	}
	
	.project-page.mellow-identity .id-sketches img.one {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.one {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches img.two {
		left: 30px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.two {
		left: 0px;
	}
	
	.project-page.mellow-identity .id-sketches img.three {
		left: 203px;
		margin-top: 100px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.three {
		left: 163px;
	}
	
	.project-page.mellow-identity .id-sketches img.four {
		left: 165px;
		margin-top: -80px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.four {
		left: 145px;
	}
	
	.project-page.mellow-identity .id-sketches img.five, .project-page.mellow-identity .id-sketches.sketchesfade img.five {
		left: 320px;
	}
	
	.project-page.mellow-identity .id-sketches img.hardware, .project-page.mellow-identity .id-sketches.sketchesfade img.hardware {
		width: 100px;
		left: 380px;
		margin-top: 82px;
	}
	
	.project-page.mellow-identity .id-sketches img.six {
		left: 495px;
		margin-top: 100px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.six {
		left: 505px;
	}
	
	.project-page.mellow-identity .id-sketches img.seven {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.seven {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches img.eight {
		left: 455px;
		margin-top: -60px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.eight {
		left: 475px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.nine {
		right: 20px;
	}
	
	.project-page.mellow-identity .id-sketches img.nine {
		right: 40px;
		margin-top: -20px;
	}
	
	.project-page.mellow-identity .id-sketches img.details-one {
		width: 350px;
		bottom: -40px;
		left: 0;
	}
	
	.project-page.mellow-identity .id-sketches img.details-two {
		right: -20px;
		top: -50px;
		width: 350px;
	}
	
	
	.project-page.mellow-identity section#font img {
		max-width: 450px;
		margin-top: -150px;
	}
	
	
	.project-page.mellow-identity section.id-composition img.iphone {
	margin-top: -60px;
	}
	
	
	
	/*** MELLOW WEBSITE ***/
	
	
	.project-page.mellow-website .composition .column img {
		transform: scale(0.85);
	}
	
	.project-page.mellow-website .composition .column .title-text .text {
		font-size: 37px;
	}
	
	.project-page.mellow-website .composition .column .desc-text .text {
		font-size: 14px;
		width: 410px;
	}
	
	.project-page.mellow-website .pages {
		padding-top: 85px;
	}
	
	.project-page.mellow-website .pages .page-one {
		width: 920px;
	}
	
	.project-page.mellow-website .pages .page-two {
		transform: translateX(-650px);
	}
	
	.project-page.mellow-website .pages .element-one {
		transform: translateX(460px);
	}
	
	.project-page.mellow-website .pages .page-three {
		transform: translateX(0px);
	}
	
	
	.project-page.mellow-website .pages .page-four {
		width: 90%;
	}
	
	.project-page.mellow-website .pages .page-six {
		margin-top: -535px;
	}
	
	.project-page.mellow-website .pages .element-two {
		margin-top: -160px;
		transform: translateX(270px);
	}
	
	.project-page.mellow-website .pages .page-seven {
		margin-top: 90px;
		width: 90%;
	}
	
	.project-page.mellow-website .pages .element-three {
		transform: translateX(280px);
	}
	
	
	
	
	/*** MELLOW APP ***/
	
	
	.project-page.mellow-app .device-closeup .item {
		width: 370px;
		height: 454px;
	}
	
	.project-page.mellow-app .device-closeup .item .device .hardware {
		width: 370px;
		height: 454px;
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;	
	}
	
	.project-page.mellow-app section.home .device-closeup .item .device .screen {
		left: 22px;
		top: 19px;
		width: 326px;
		height: 435px;
	}
	
	.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: 326px;
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;	
	}
	
	.project-page.mellow-app section.home .pull-to-search .item .device .screen .middle {
		top: 85px;
	}
	
	.project-page.mellow-app section.home .device-closeup .item .device .screen .top img {
		width: 100%;
	}
	
	.project-page.mellow-app section.home .pull-to-search .item .device .screen .search {
		top: 10px;
	}
	
	.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .search-icon {
		width: 20px;
		top: 45px;
	}
	
	.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .elements {
		width: 295px;
	}
	
	/*** SEARCH ***/
	
	@-webkit-keyframes home-details-search {
		0% { top: 20px;}
		100% { top: 70px; }
	}
	
	@keyframes home-details-search {
		0% { top: 20px;}
		100% { top: 70px; }
	}
	
	/*** SEARCH OFF ***/
	
	@-webkit-keyframes home-details-search-off {
		0% { top: 70px;}
		100% { top: 20px; }
	}
	
	@keyframes home-details-search-off {
		0% { top: 70px;}
		100% { top: 20px; }
	}
	
	/*** SEARCH LIST ***/
	
	@-webkit-keyframes home-details-search-list {
		0% { transform: translateY(0px); }
		100% { transform: translateY(100px); }
	}
	
	@keyframes home-details-search-list {
		0% { transform: translateY(0px); }
		100% { transform: translateY(100px); }
	}
	
	/*** SEARCH LIST OFF ***/
	
	@-webkit-keyframes home-details-search-list-off {
		0% { transform: translateY(100px); }
		100% { transform: translateY(0px); }
	}
	
	@keyframes home-details-search-list-off {
		0% { transform: translateY(100px); }
		100% { transform: translateY(0px); }
	}
	
	
	.project-page.mellow-app section.home .home-details .tile_three {
		margin-top: -282px;
	}
	
	.project-page.mellow-app section.home .title {
		height: 280px;
	}
	
	.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar {
		top: 77px;
		height: 45px;
		border-bottom: 0.5px solid #E1E1E3;
	}
	
	.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar p {
		font-size: 11px;
	}
	
	.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .bar-title  {
		top: 5px;
	}
	
 .project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp, .project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp-off {
		top: 5px;
		right: 55px;
	}
	
	.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .switch {
		width: 35px;
		height: 23px;
		top: 11px;
	}
	
	.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .help {
		width: 13px;
		top: 16px;
		left: 105px;
	}
	
	.project-page.mellow-app section.home .pre-cooling .item .device .screen .middle {
		top: 132px;
	}
	
	.project-page.mellow-app section.home .notification .item .device .screen .top {
		width: 326px;
		height: 40px;
		top: 40px;
	}
	
	.project-page.mellow-app section.home .notification .item .device .screen .middle {
		top: 70px;
	}
	
	.project-page.mellow-app section.home .notification .item .device .screen .notification-screen {
		-webkit-background-size: 100%;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%;	
	}
	
	
	.project-page.mellow-app section.home .notification .item .device .screen .notification-top img, .project-page.mellow-app section.home .notification.animate-off .item .device .screen .top img {
		width: 100%;
	}
	
	
	/*** NOTIFICATION ***/
	
	@-webkit-keyframes home-details-notification {
		0% { transform: translateX(0);}
		100% { transform: translateX(-285px);}
	}
	
	@keyframes home-details-notification {
		0% { transform: translateX(0);}
		100% { transform: translateX(-285px);}
	}
	
	/*** NOTIFICATION OFF ***/
	
	@-webkit-keyframes home-details-notification-off {
		0% { transform: translateX(-285px);}
		100% { transform: translateX(0);}
	}
	
	@keyframes home-details-notification-off {
		0% { transform: translateX(-285px);}
		100% { transform: translateX(0);}
	}

	.project-page.mellow-app section.home .home-details .tile_five {
		margin-top: -281px;
		height: 280px;
	}
	
	.project-page.mellow-app section.cooking .color-description .wrap .grid-three {
		width: 32%;
	}
	
	
	
	
	
	/***** PMC WEBSITE *******/
	
	
	.project-page.pmc-website .mac-screen-home .screen {
		margin-top: -292px;
	}
	
	
	.project-page.pmc-website .mac-screen-home .bg {
		height: 450px;
	}
	
	
	.project-page.pmc-website section.website-mac .screen .border {
		width: 835px;
		height: 479px;
		border: 13px solid black;
	}
	
	.project-page.pmc-website section.website-mac .base img {
		width: 207px;
		height: 209px;
	}
	
	.project-page.pmc-website .mac-screen-project .bg {
		height: 540px;
		margin-top: -550px;
	}
	
	.project-page.pmc-website .mac-screen-project .screen .border img {
		width: 58px;
		height: 36px;
		margin-top: 15px;
	}
	
	.project-page.pmc-website .composition .column .blue-box .blue-bg p {
		font-size: 20px;
		line-height: 31px;
		width: 290px;
		height: 95px;
	}
	
	
	
	
	
	
	
	
	
}



/*  DESKTOP 
================================================== */


@media screen and (min-width: 1120px) and (max-width: 1539px) { 
	.row {width: 1080px; margin: 0 auto; padding-right: 20px; padding-left: 20px;
	}
	
	section.work .project {
	  width: 240px;
	  margin-right: 17px;
	  margin-left: 17px;
	}
	
	section.work .project.one, section.work .project.five, section.work .project.nine, section.work .project.thirteen {
	  margin-left: 0;
	}
	
	section.work .project.four, section.work .project.eight, section.work .project.twelve, section.work .project.sixteen {
	  margin-right: 0;
	}
	
	
	
	.project-page.mellow-identity .id-sketches img.main {
		height: 240px;
	}
	
	
	.project-page.mellow-identity .id-sketches img.one {
		left: 0px;
		margin-top: 40px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.one {
		left: -30px;
	}
	
	.project-page.mellow-identity .id-sketches img.two {
		left: 120px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.two {
		left: 90px;
	}
	
	.project-page.mellow-identity .id-sketches img.three {
		left: 253px;
		margin-top: 100px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.three {
		left: 203px;
	}
	
	.project-page.mellow-identity .id-sketches img.four {
		left: 265px;
		margin-top: -80px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.four {
		left: 245px;
	}
	
	.project-page.mellow-identity .id-sketches img.five, .project-page.mellow-identity .id-sketches.sketchesfade img.five {
		left: 380px;
	}
	
	.project-page.mellow-identity .id-sketches img.six {
		left: 515px;
		margin-top: 100px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.six {
		left: 525px;
	}
	
	.project-page.mellow-identity .id-sketches img.seven {
		left: 505px;
		margin-top: -100px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.seven {
		left: 525px;
	}
	
	.project-page.mellow-identity .id-sketches img.eight {
		left: 625px;
		margin-top: -30px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.eight {
		left: 665px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.nine {
		right: 0px;
	}
	
	.project-page.mellow-identity .id-sketches img.nine {
		right: 20px;
	}
	
	.project-page.mellow-identity .id-sketches img.hardware, .project-page.mellow-identity .id-sketches.sketchesfade img.hardware {
		width: 100px;
		left: 443px;
		margin-top: 82px;
	}
	
	.project-page.mellow-identity .id-sketches img.details-one {
		width: 350px;
		left: 0;
	}
	
	.project-page.mellow-identity .id-sketches img.details-two {
		right: -20px;
		width: 350px;
	}
	
	.project-page.mellow-website .pages .page-four, .project-page.mellow-website .pages .page-seven {
		width: 90%;
		max-width: 1208px;
	}
	

	
	
	
	
	/***** PMC WEBSITE *******/
	
	
	.project-page.pmc-website .mac-screen-home .screen {
		margin-top: -335px;
	}
	
	
	.project-page.pmc-website .mac-screen-home .bg {
		height: 500px;
	}
	
	
	.project-page.pmc-website section.website-mac .screen .border {
		width: 964px;
		height: 553px;
		border: 13px solid black;
	}
	
	.project-page.pmc-website section.website-mac .base img {
		width: 238px;
		height: 240px;
	}
	
	.project-page.pmc-website section.transition {
		margin-top: -620px;
	}
	
	.project-page.pmc-website .mac-screen-project .bg {
		height: 700px;
		margin-top: -680px;
	}
	
	.project-page.pmc-website .mac-screen-project .screen .border img {
		width: 58px;
		height: 36px;
		margin-top: 15px;
	}
	
	.project-page.pmc-website .composition .column .blue-box .blue-bg p {
		font-size: 23px;
		line-height: 31px;
		width: 380px;
		height: 95px;
	}
	
	
	.project-page section#composition {
	  -webkit-background-size: 1120px;
	  -moz-background-size: 1120px;
	  -o-background-size: 1120px;
	  background-size: 1120px;
	}
	
	.project-page section.id-composition img {
		max-width: 1120px;
	}
	
	.project-page.mellow-identity section.id-composition img.iphone {
	margin-top: -75px;
	}
	
	
}




/*  DESKTOP 
================================================== */

@media screen and (min-width: 1120px) and (max-width: 1426px) {
	
	
	.project-page.two section.grafics {
	  height: 950px;
	}
	
	.project-page.two section.web {
	  height: 1140px;
	}
	
	.project-page.two section.web-two, .project-page.two section.web-three {
	  height: 710px;
	}


}










/* #Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.row {width: 690px; margin: 0 auto; padding-right: 20px;
	padding-left: 20px;}
	
	.project-page.woder-identity section#logo-versions .content .right, .project-page.wandle-identity section#logo-versions .content .right {
	  width: 35%;
	}
	.project-page.woder-identity section#logo-versions .content .left, .project-page.wandle-identity section#logo-versions .content .left {
	  width: 65%;
	}
	
	.project-page section#composition {
	  -webkit-background-size: 730px;
	  -moz-background-size: 730px;
	  -o-background-size: 730px;
	  background-size: 730px;
	}
	
	.project-page section.id-composition img {
		max-width: 730px;
	}
	
	.project-page.two section.grafics {
	  height: 650px;
	}
	
	.project-page.two section.web {
	  height: 740px;
	}
	
	.project-page.two section.web-two, .project-page.two section.web-three {
	  height: 460px;
	}
	
	
	
	.project-page section#composition .zoom a img {margin-top: 135px;}
	
	.project-page.one section#font {
	  -webkit-background-size: 650px;
	  -moz-background-size: 650px;
	  -o-background-size: 650px;
	  background-size: 650px;
	  background-position: center 85px;
	}
	
	.project-page.two section#font {
	  -webkit-background-size: 650px;
	  -moz-background-size: 650px;
	  -o-background-size: 650px;
	  background-size: 650px;
	  background-position: center 120px;
    height: 550px;
  }
	
	/*body.two #icon>div:nth-of-type(1) {
	    -webkit-background-size: 150%;
	      -moz-background-size: 150%;
	      -o-background-size: 150%;
	      background-size: 150%;
	      background-attachment: inherit;
	  }*/
		
		
		
		/*** MELLOW IDENTITY **/
		
		
		.project-page.mellow-identity .id-sketches {
			max-height: 800px;
		}
		
		.project-page.mellow-identity .id-sketches img.main {
		height: 230px;
		position: absolute;
		}
		
		
		.project-page.mellow-identity .id-sketches img.one {
			display: none;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.one {
			display: none;
		}
		
		.project-page.mellow-identity .id-sketches img.two {
			left: 10px;
			margin-top: 60px;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.two {
			left: 0px;
		}
		
		.project-page.mellow-identity .id-sketches img.three {
			left: 153px;
			margin-top: 100px;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.three {
			left: 123px;
		}
		
		.project-page.mellow-identity .id-sketches img.four {
			left: 95px;
			margin-top: -80px;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.four {
			left: 85px;
		}
		
		.project-page.mellow-identity .id-sketches img.five, .project-page.mellow-identity .id-sketches.sketchesfade img.five {
			left: 250px;
			margin-top: -70px;
		}
		
		.project-page.mellow-identity .id-sketches img.hardware, .project-page.mellow-identity .id-sketches.sketchesfade img.hardware {
			width: 100px;
			left: 310px;
			margin-top: 10px;
		}
		
		.project-page.mellow-identity .id-sketches img.six {
			display: none;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.six {
			display: none;
		}
		
		.project-page.mellow-identity .id-sketches img.seven {
			display: none;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.seven {
			display: none;
		}
		
		.project-page.mellow-identity .id-sketches img.eight {
			left: 275px;
			margin-top: 130px;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.eight {
			left: 295px;
		}
		
		.project-page.mellow-identity .id-sketches.sketchesfade img.nine {
			right: 0px;
		}
		
		.project-page.mellow-identity .id-sketches img.nine {
			right: 20px;
			margin-top: 0px;
		}
		
		.project-page.mellow-identity .id-sketches img.details-one {
			width: 300px;
			left: 0;
		}
		
		.project-page.mellow-identity .id-sketches img.details-two {
			right: -20px;
			width: 300px;
		}
		
		
		.project-page.mellow-identity section#font img {
			max-width: 450px;
			margin-top: -150px;
		}
		
		
		.project-page.mellow-identity section.id-composition img.iphone {
		margin-top: -60px;
		}
		
		
		.project-page.mellow-identity section.id-composition img.iphone {
			margin-top: -45px;
		}
		
		
		/*** MELLOW WEBSITE ***/
		
		
		.project-page.mellow-website .composition .column img {
			transform: scale(0.7);
		}
		
		.project-page.mellow-website .composition .column .desc-text .text {
			width: 300px;
			font-size: 14px;
			line-height: 28px;
		}
		
		.project-page.mellow-website .composition .column .title-text .text {
			font-size: 30px;
		}
		
		.project-page.mellow-website .pages {
			padding-top: 80px;
		}
		
		.project-page.mellow-website .pages .page-one {
			/*width: 120%;
			transform: translateX(-200px);*/
			width: 90%;
		}
		
		.project-page.mellow-website .pages .page-two {
			transform: translateX(-260px);
			margin-top: -130px;
			width: 600px;
		}
		
		
		.project-page.mellow-website .pages .page-three {
			margin-top: -490px;
			transform: translateX(290px);
			/*width: 330px;*/
		}
		
		.project-page.mellow-website .pages .element-one {
			width: 300px;
			height: 260px;
			transform: translateX(-160px);
			margin-top: -240px;
		}
		
		.project-page.mellow-website .pages .element-one img {
			margin-top: 50px;
			width: 35px;
		}
		
		.project-page.mellow-website .pages .element-one h1 {
			font-size: 11px;
			margin-bottom: 20px;
		}
		
		.project-page.mellow-website .pages .element-one p {
			font-size: 13px;
			width: 210px;
		}
		
		.project-page.mellow-website .pages .page-four {
			margin-top: 65px;
			transform: translateX(61px);
		}
		
		.project-page.mellow-website .pages .page-five {
			transform: translateX(390px);
		}
		
		.project-page.mellow-website .pages .element-two {
			margin-top: -110px;
			transform: translateX(250px);
		}
		
		.project-page.mellow-website .pages .page-seven {
			width: 90%;
			margin-top: 90px;
		}
		
		.project-page.mellow-website .pages .element-three {
			transform: translateX(305px);
		}
		
		
		
		
		/*** MELLOW APP TABLET ***/
		
		
		.project-page.mellow-app .title h2 {
			font-size: 11px;
		}
		
		
		.project-page.mellow-app .device-tile .item, .project-page.mellow-app section.finish .item, .project-page.mellow-app section.cooking .item, .project-page.mellow-app section.ingredient-selection .item {
			width: 233px;
			height: 470px;
		}
		
		.project-page.mellow-app .device .hardware, .project-page.mellow-app section.finish .hardware, .project-page.mellow-app section.cooking .hardware, .project-page.mellow-app section.ingredient-selection .hardware {
			width: 233px;
			height: 470px;
			-webkit-background-size: 100%;
			-moz-background-size: 100%;
			-o-background-size: 100%;
			background-size: 100%;	
		}
		
		.project-page.mellow-app .device .shadow {
			width: 231px;
			height: 466px;
			top: 0;
			left: 0;
			-webkit-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
			-moz-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
			box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
		}
		
		
		.project-page.mellow-app .device .screen, .project-page.mellow-app section.finish .screen, .project-page.mellow-app section.cooking .screen, .project-page.mellow-app section.ingredient-selection .screen {
			top: 15px;
			left: 14px;
			width: 205px;
			height: 441px;
			-webkit-background-size: 100%;
			-moz-background-size: 100%;
			-o-background-size: 100%;
			background-size: 100%;
		}
		
		
		.project-page.mellow-app section.home .title img, .project-page.mellow-app section.favorites .tile_one img, .project-page.mellow-app section.history .tile_one img, .project-page.mellow-app section.more .title img, .project-page.mellow-app section.manual-mode .title img {
			width: 275px;
		}
		
		
		
		
		/*** intro ***/
		
		
		.project-page.mellow-app section.app-img-intro {
			height: 875px;
			-webkit-background-size: 1770px;
			-moz-background-size: 1770px;
			-o-background-size: 1770px;
			background-size: 1770px;
		}
		
		
		
		/*** sign in ***/
		
		.project-page.mellow-app section.signup-login .signuplogin-welcome {
			-webkit-background-size: 100%;
			-moz-background-size: 100%;
			-o-background-size: 100%;
			background-size: 100%;	
		}
		
		
		.project-page.mellow-app section.signup-login .signuplogin-welcome .middle .mellow-logo, .project-page.mellow-app section.signup-login .tile_three .signuplogin-login .middle .mellow-logo {
			width: 60px;
			top: 35px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .message-one {
			width: 141px;
			top: 170px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .message-two {
			width: 154px;
			top: 140px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .btns, .project-page.mellow-app section.signup-login .signuplogin-login .middle .fb-btn, .project-page.mellow-app section.signup-login .signuplogin-login .middle .fields, .project-page.mellow-app section.signup-login .signuplogin-login .middle .login-btn {
			width: 183px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .btns, .project-page.mellow-app section.signup-login .signuplogin-login .middle .login-btn {
			bottom: 25px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-login .middle .fields {
			bottom: 70px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-login .middle .fb-btn {
			bottom: 160px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-login .middle .mellow-logo-desc {
			width: 22px;
			top: 50px;
		}
		
		.project-page.mellow-app section.signup-login .signuplogin-login .middle .arrow {
			width: 6px;
			top: 35px;
		}
		
		.project-page.mellow-app section.signup-login .tile_three {
			margin-top: -350px;
		}
		
		.project-page.mellow-app section.signup-login .tile_four .wrap {
			-webkit-background-size: 900px;	
			-moz-background-size: 900px;	
			-o-background-size: 900px;	
			background-size: 900px;	
		}
		
		
		.project-page.mellow-app section.signup-login .tile_four {
			height: 715px;
		}
		
		.project-page.mellow-app section.signup-login .grid-two.tile_one {
			height: 360px;
		}
		
		.project-page.mellow-app section.signup-login .tile_five {
			margin-top: -355px;
			height: 355px;
		}
		
		
			.project-page.mellow-app .item .screen .bottom .home-indicator {
				bottom: 4px;
				width: 70px;
				height: 3px;
			}
			
			.project-page.mellow-app .device-closeup .item {
				width: 280px;
				height: 344px;
			}
			
			.project-page.mellow-app .device-closeup .item .device .hardware {
				width: 280px;
				height: 344px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
			}
			
			.project-page.mellow-app section.home .device-closeup .item .device .screen {
				left: 18px;
				top: 15px;
				width: 245px;
				height: 330px;
			}
			
			.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: 245px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
			}
			
			.project-page.mellow-app section.home .pull-to-search .item .device .screen .middle {
				top: 65px;
			}
			
			.project-page.mellow-app section.home .device-closeup .item .device .screen .top img {
				width: 100%;
			}
			
			.project-page.mellow-app section.home .pull-to-search .item .device .screen .search {
				top: 10px;
			}
			
			.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .search-icon {
				width: 15px;
				top: 35px;
			}
			
			.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .elements {
				width: 215px;
			}
			
			/*** SEARCH ***/
			
			@-webkit-keyframes home-details-search {
				0% { top: 0px;}
				100% { top: 50px; }
			}
			
			@keyframes home-details-search {
				0% { top: 0px;}
				100% { top: 50px; }
			}
			
			/*** SEARCH OFF ***/
			
			@-webkit-keyframes home-details-search-off {
				0% { top: 50px;}
				100% { top: 0px; }
			}
			
			@keyframes home-details-search-off {
				0% { top: 50px;}
				100% { top: 0px; }
			}
			
			/*** SEARCH LIST ***/
			
			@-webkit-keyframes home-details-search-list {
				0% { transform: translateY(0px); }
				100% { transform: translateY(60px); }
			}
			
			@keyframes home-details-search-list {
				0% { transform: translateY(0px); }
				100% { transform: translateY(60px); }
			}
			
			/*** SEARCH LIST OFF ***/
			
			@-webkit-keyframes home-details-search-list-off {
				0% { transform: translateY(60px); }
				100% { transform: translateY(0px); }
			}
			
			@keyframes home-details-search-list-off {
				0% { transform: translateY(60px); }
				100% { transform: translateY(0px); }
			}
			
			
			.project-page.mellow-app section.home .home-details .tile_three {
				margin-top: -227px;
			}
			
			.project-page.mellow-app section.home .title {
				height: 225px;
			}
			
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar {
				top: 58px;
				height: 40px;
				border-bottom: 0.5px solid #E1E1E3;
			}
			
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar p {
				font-size: 9px;
			}
			
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .bar-title  {
				top: 5px;
			}
			
		.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp, .project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp-off {
				top: 5px;
				right: 48px;
			}
			
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .switch {
				width: 30px;
				height: 19px;
				top: 10px;
			}
			
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .help {
				width: 11px;
				top: 14px;
				left: 89px;
			}
			
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .middle {
				top: 108px;
			}
			
			.project-page.mellow-app section.home .notification .item .device .screen .top {
				width: 245px;
				height: 30px;
				top: 27px;
				-webkit-border-top-right-radius: 10px;
				-moz-border-radius-topright: 10px;
				border-top-right-radius: 10px;
			}
			
			.project-page.mellow-app section.home .notification .item .device .screen .middle {
				top: 47px;
			}
			
			.project-page.mellow-app section.home .notification .item .device .screen .notification-screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
			}
			
			
			.project-page.mellow-app section.home .notification .item .device .screen .notification-top img, .project-page.mellow-app section.home .notification.animate-off .item .device .screen .top img {
				width: 100%;
			}
			
			
			/*** NOTIFICATION ***/
			
			@-webkit-keyframes home-details-notification {
				0% { transform: translateX(0);}
				100% { transform: translateX(-215px);}
			}
			
			@keyframes home-details-notification {
				0% { transform: translateX(0);}
				100% { transform: translateX(-215px);}
			}
			
			/*** NOTIFICATION OFF ***/
			
			@-webkit-keyframes home-details-notification-off {
				0% { transform: translateX(-215px);}
				100% { transform: translateX(0);}
			}
			
			@keyframes home-details-notification-off {
				0% { transform: translateX(-215px);}
				100% { transform: translateX(0);}
			}
			
			.project-page.mellow-app section.home .home-details .tile_five {
				margin-top: -226px;
				height: 225px;
			}
			
			.project-page.mellow-app section.cooking .color-description .wrap .grid-three {
				width: 32%;
			}
			
			
			/*** pairing ***/
			
			
			.project-page.mellow-app section.pairing .screen .middle {
				height: 345px;
				top: 50px;
			}
			
			.project-page.mellow-app section.pairing .screen.welcome .welcome-bg img {
				width: 100%;
			}
			
			.project-page.mellow-app section.pairing .welcome .middle .welcome-icon {
				width: 204px;
			}
			
			.project-page.mellow-app section.pairing .welcome .middle .welcome-text {
				width: 127px;
				top: 255px;
			}
			
			.project-page.mellow-app section.pairing .screen .bottom {
				width: 100%;
				height: 45px;
			}
			
			.project-page.mellow-app section.pairing .screen .bottom p {
				font-size: 9px;
			}
			
			
			.project-page.mellow-app section.pairing .screen.welcome .bottom p {
				margin-top: 9px;
				margin-bottom: 9px;
			}
			
			
			.project-page.mellow-app section.pairing .tile_three .screen-wifi .screen-img img {
				width: 100%;
			}
			
			.project-page.mellow-app section.pairing .tile_three .middle img.wifi-icon {
				width: 70px;
				top: 63px;
			}
			
			.project-page.mellow-app section.pairing .tile_three .middle img.wifi-text {
				width: 87px;
				top: 136px;
			}
			
			.project-page.mellow-app section.pairing .tile_three .middle img.wifi-fields {
				width: 183px;
				top: 245px;
			}
			
			.project-page.mellow-app section.pairing .screen .bottom p {
				margin-top: 10px;
			}
			
			
			.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow .shadow {
				-webkit-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
				-moz-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
				box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
			}
			
			
			.project-page.mellow-app section.pairing .screen .screen-img {
				width: 100%;
			}
			
			.project-page.mellow-app section.pairing .screen .screen-img img {
				width: 100%;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .mellow-illustration {
				width: 175px;
				height: 161px;
				top: 42px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-bg {
				width: 163.1px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-base-top {
				width: 40.6px;
				top: 93px;
				left: 91.7px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-vat {
				width: 77px;
				left: 55.3px;
				top: 18.9px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-lid {
				width: 72.8px;
				left: 56.7px;
				top: 16.8px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-base {
				width: 93.1px;
				left: 40.6px;
				top: 29.4px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-light-orange, .project-page.mellow-app section.pairing .tile_five.animate .screen .middle .machine-light-green {
				width: 17.5px;
				top: 39.2px;
				left: 58.8px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .machine-wall-plug {
				width: 17.5px;
				left: 11.9px;
				top: 75.6px;
			}
			
			
			
			.project-page.mellow-app section.pairing .screen .middle .machine-cable {
				width: 42.7px;
				left: 18.9px;
				top: 93.1px;
			}
			
			
			.project-page.mellow-app section.pairing .screen .middle .text {
				top: 241.5px;
			}
			
			.project-page.mellow-app section.pairing .screen .middle .text img {
				width: 137.9px;
			}
			
			.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration {
				top: 42px;
			}
			
			
			.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand-light {
				left: 53.9px;
				top: 30.8px;
				width: 51.8px;
			}
			
			.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand-vibrate {
				left: 65.8px;
				top: 37.1px;
				width: 23.8px;
			}
			
			.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand {
				left: 29.4px;
				top: 42px;
				width: 66.5px;
			}
			
			
			.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting .waiting-icon {
				top: 98px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-icon {
				top: 84px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .middle .waiting-icon {
				width: 43.4px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting .waiting-text {
				top: 161px;
				width: 99.4px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-text {
				top: 147px;
				width: 109.9px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-name {
			top: 224px;
			width: 107.1px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .waiting-desc {
				height: 98px;
			}
			
			.project-page.mellow-app section.pairing .tile_six .screen .waiting-desc img {
			margin-top: 24.5px;
			width: 154px;
			}
			
			.project-page.mellow-app section.pairing .tile_four, .project-page.mellow-app section.pairing .tile_six {
				margin-top: -355px;
			}
			
			.project-page.mellow-app section.pairing .tile_two, .project-page.mellow-app section.pairing .title.tile_seven {
				height: 355px;
			}
			
			
			/*** onboarding ***/
			
			.project-page.mellow-app section.onboarding {
				-webkit-background-size: 1270px;
				-moz-background-size: 1270px;
				-o-background-size: 1270px;
				background-size: 1270px;	
				height: 985px;
			}
			
			
			
			
			/*** home ***/
			
			
			.project-page.mellow-app section.home .home-iphone {
				height: 750px;
			}
			
			.project-page.mellow-app section.home .home-iphone .wrap-shadow .top img, .project-page.mellow-app section.home .home-iphone .wrap-shadow .bottom img, .project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar img {
				width: 100%;
			}
			
			.project-page.mellow-app section.home .home-iphone .wrap-shadow .bottom {
				width: 100%;
				height: 46.9px;
			}
			
			.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar {
				width: 100%;
				height: 28px;
				bottom: 0px;
			}
			
			.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p.status {
				font-size: 5px;
				top: 6px;
			}
			
			.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p.ingredient {
				font-size: 7.5px;
				top: 13px;
			}
			
			.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow .cooking-bar {
				transform: translateY(-47px);
			}

			.project-page.mellow-app section.home .home-iphone .wrap-shadow .middle {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				top: -65px;
				height: 460px;
			}
			
			@-webkit-keyframes home-list-scroll {
				0% { transform: translateY(0px); }
				70% { transform: translateY(120px); }
				100% { transform: translateY(112px); }
			}
			
			@keyframes home-list-scroll {
				0% { transform: translateY(0px); }
				70% { transform: translateY(120px); }
				100% { transform: translateY(112px); }
			}
			
			@-webkit-keyframes home-list-scroll-off {
				0% { transform: translateY(112px); }
				70% { transform: translateY(-8px); }
				100% { transform: translateY(0px); }
			}
			
			@keyframes home-list-scroll-off {
				0% { transform: translateY(112px); }
				70% { transform: translateY(-8px); }
				100% { transform: translateY(0px); }
			}
			
			
			.project-page.mellow-app section.favorites .tile_two .item .screen .wrap .top img, .project-page.mellow-app section.favorites .tile_two .item .screen .wrap .bottom img {
				width: 100%;
			}
			
			.project-page.mellow-app section.favorites .tile_two .item .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				background-position-y: -99px;
			}
			
			@-webkit-keyframes favorites-list-scroll {
				0% { background-position-y: -99px; }
				70% { background-position-y: 58px; }
				100% { background-position-y: 48px; }
			}
			
			@keyframes favorites-list-scroll {
				0% { background-position-y: -99px; }
				70% { background-position-y: 58px; }
				100% { background-position-y: 48px; }
			}
			
			@-webkit-keyframes favorites-list-scroll-off {
				0% { background-position-y: 48px; }
				70% { background-position-y: -109px; }
				100% { background-position-y: -99px; }
			}
			
			@keyframes favorites-list-scroll-off {
				0% { background-position-y: 48px; }
				70% { background-position-y: -109px; }
				100% { background-position-y: -99px; }
			}
			
			.project-page.mellow-app section.favorites .tile_three .item .screen .wrap .top img, .project-page.mellow-app section.favorites .tile_three .item .screen .wrap .bottom img {
				width: 100%;
			}
			
			.project-page.mellow-app section.favorites .tile_three .item .screen .middle, .project-page.mellow-app section.favorites .tile_four .item .screen .middle {
				-webkit-background-size: 141px;	
				-moz-background-size: 141px;	
				-o-background-size: 141px;	
				background-size: 141px;	
			}
			
			.project-page.mellow-app section.favorites .tile_three, .project-page.mellow-app section.favorites .tile_five {
				margin-top: -320px;
			}
			
			.project-page.mellow-app section.favorites .tile_four .item .top-screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				height: 441px;
			}
			
			.project-page.mellow-app section.favorites .tile_four.animate .item .top-screen {
				top: -4px;
			}
			
			.project-page.mellow-app section.favorites .tile_four .item .status-bar {
				width: 100%;
			}
			
			
			
			
			.project-page.mellow-app section.favorites .tile_four .item .screen .wrap .top img, .project-page.mellow-app section.favorites .tile_four .item .screen .wrap .bottom img {
				width: 100%;
			}
			
			.project-page.mellow-app section.favorites .tile_five .item .screen, .project-page.mellow-app section.manual-mode .tile_two .item .screen, .project-page.mellow-app section.manual-mode .tile_three .item .screen, .project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .bg, .project-page.mellow-app section.manual-mode .tile_four .item .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				background-position-y: bottom;
			}
		
			
			.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul {
				top: 82px;
			}
			
			.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li {
				width: 31px;
				height: 34px;
			}
			
			
			.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li img.add-btn {
				width: 13px;
			}
			
			.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li img.added-btn {
				width: 8px;
			}
			
			
			/*** manual mode ***/
			
			
			.project-page.mellow-app section.manual-mode .tile_five, .project-page.mellow-app section.manual-mode .tile_one {
				height: 350px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_three, .project-page.mellow-app section.manual-mode .tile_five {
				margin-top: -360px;
			}
			
			
			.project-page.mellow-app section.manual-mode .tile_two .item .screen .middle img {
				width: 68px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_two .item .screen .middle {
				left: 80px;
				top: 136px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .bg {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info {
				width: 140px;
				top: 108px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info .text {
				font-size: 8px;
				line-height: 14px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info .ps {
				font-size: 7px;
				line-height: 11px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .picker img {
				width: 100%;
			}
			
			.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle {
				top: 164px;
				left: -54px;
				width: 315px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .change {
				font-size: 6px;
				max-width: 43px;
				margin: 14px auto 0;
			}
			
			.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: 15px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box .for {
			font-size: 6px;
			margin-bottom: 3px;
			margin-top: 3px;
			}
			
			.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box {
				margin-right: 24px;
				width: 77px;
			}
			
			.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.animate .box-wrapper {
				transform: translate(105px, 0px);
			}
			
			/*** BOX SLIDE ***/
			
			
			@-webkit-keyframes manual-mode-middle-slide {
				0% { transform: translate(105px, 20px); opacity: 0; }
				100% { transform: translate(105px, 0px); opacity: 1;}
			}
			
			@keyframes manual-mode-middle-slide {
				0% { transform: translate(105px, 20px); opacity: 0; }
				100% { transform: translate(105px, 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(105px); opacity: 1; }
				20% { transform: translateX(0px); opacity: 1; }
				25% { transform: translateX(0px); opacity: 1; }
				35% { transform: translateX(-110px); opacity: 1; }
				45% { transform: translateX(-105px); opacity: 1; }
				55% { transform: translateX(-105px); opacity: 1;}
				65% {  transform: translateX(7px); opacity: 1;}
				80% {  transform: translateX(0px); opacity: 1;}
				100% { transform: translateX(0px); opacity: 1;}
			}
			
			@keyframes manual-mode-middle {
				0% { transform: translateX(105px); opacity: 1; }
				20% { transform: translateX(0px); opacity: 1; }
				25% { transform: translateX(0px); opacity: 1; }
				35% { transform: translateX(-110px); opacity: 1; }
				45% { transform: translateX(-105px); opacity: 1; }
				55% { transform: translateX(-105px); opacity: 1;}
				65% {  transform: translateX(7px); opacity: 1;}
				80% {  transform: translateX(0px); opacity: 1;}
				100% { transform: translateX(0px); opacity: 1;}
			}
			
			
			
			/*** cooking ***/
			
			
			.project-page.mellow-app section.cooking .color-description .wrap .grid-three img {
				width: 90px;
			}
			
			.project-page.mellow-app section.cooking .color-description .wrap .grid-three p {
				font-size: 10px;
			}
			
			
			/*** history ***/
			
			.project-page.mellow-app section.history .tile_one {
				height: 350px;
			}
			
			.project-page.mellow-app section.history .tile_three {
				margin-top: -361px;
			}
			
			.project-page.mellow-app section.history .tile_five {
				margin-top: -357px;
				height: 350px;
			}
			
			
			.project-page.mellow-app section.history .device-tile .item .screen .wrap .top {
				width: 100%;
				height: 49px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
			}
			
			.project-page.mellow-app section.history .tile_two .item .screen, .project-page.mellow-app section.history .tile_three .item .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
				background-position-y: 22px;
			}
			
			.project-page.mellow-app section.history .device-tile .item .screen .wrap .bottom {
				width: 100%;
				height: 46px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
				background-position-y: top;
			}
			
			@-webkit-keyframes history-list-scroll {
				0% { background-position-y: -170px; }
				80% { background-position-y: 32px; }
				100% { background-position-y: 22px; }
			}
			
			@keyframes history-list-scroll {
				0% { background-position-y: -170px; }
				80% { background-position-y: 32px; }
				100% { background-position-y: 22px; }
			}
			
			@-webkit-keyframes history-list-scroll-off {
				0% { background-position-y: 22px; }
				80% { background-position-y: -180px; }
				100% { background-position-y: -170px; }
			}
			
			@keyframes history-list-scroll-off {
				0% { background-position-y: 22px; }
				80% { background-position-y: -180px; }
				100% { background-position-y: -170px; }
			}
			
			.project-page.mellow-app section.history .tile_three .item .screen .wrap .popup {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				height: 200px;
			}
			
			.project-page.mellow-app section.history .tile_four .item .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			
			@-webkit-keyframes history-detail {
				0% { background-position-y: 32px; }
				60% { background-position-y: -90px; }
				100% { background-position-y: -80px; }
			}
			
			@keyframes history-detail {
				0% { background-position-y: 32px; }
				60% { background-position-y: -90px; }
				100% { background-position-y: -80px; }
			}
			
			@-webkit-keyframes history-detail-off {
				0% { background-position-y: -80px; }
				80% { background-position-y: 42px; }
				100% { background-position-y: 32px; }
			}
			
			@keyframes history-detail-off {
				0% { background-position-y: -80px; }
				80% { background-position-y: 42px; }
				100% { background-position-y: 32px; }
			}
			
			
			/*** more ***/
			
			
			.project-page.mellow-app section.more .tile_one .item .screen, .project-page.mellow-app section.more .tile_three .item .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			
			.project-page.mellow-app section.more .device-tile .item .screen .wrap .bottom {
				width: 100%;
				height: 46px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				background-position-y: top;
			}
			
			.project-page.mellow-app section.more .device-tile .item .screen .wrap .disconnected, .project-page.mellow-app section.more .device-tile .item .screen .wrap .temperature {
				top: 155px;
			}
			
			.project-page.mellow-app section.more .device-tile .item .screen .wrap .temperature img {
				width: 23px;
			}
			
			.project-page.mellow-app section.more .device-tile .item .screen .wrap .disconnected img {
				width: 55px;
			}
			
			.project-page.mellow-app section.more .device-tile .item .screen .wrap .connected-message img {
				width: 159px;
			}
			
			@-webkit-keyframes more-connected-msg {
				0% { bottom: 0px; opacity: 0; }
				10% { bottom: 53px; opacity: 1; }
				20% { bottom: 48px; opacity: 1; }
				80% { bottom: 48px; opacity: 1; }
				100% { bottom: 0px; opacity: 0;}
			}
			
			@keyframes more-connected-msg {
				0% { bottom: 0px; opacity: 0; }
				10% { bottom: 53px; opacity: 1; }
				20% { bottom: 48px; opacity: 1; }
				80% { bottom: 48px; opacity: 1; }
				100% { bottom: 0px; opacity: 0;}
			}
			
			.project-page.mellow-app section.more .tile_three .item .screen .wrap {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				background-position-y: bottom;
			}
			
			.project-page.mellow-app section.more .tile_three .item .screen .wrap .mellow-device-list {
				width: 340px;
				height: 196px;
				top: 20px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			@-webkit-keyframes more-mellow-devices {
				0% { left: 145px; opacity: 0; }
				20% { left: 55px; opacity: 1; }
				40% { left: 55px; opacity: 1; }
				50% { left: -62px; opacity: 1; }
				60% { left: -62px; opacity: 1; }
				70% { left: -175px; opacity: 1; }
				80% { left: -175px; 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: -62px; opacity: 1; }
				60% { left: -62px; opacity: 1; }
				70% { left: -175px; opacity: 1; }
				80% { left: -175px; opacity: 1; }
				100% { left: 55px; opacity: 1; }
			}
			
			.project-page.mellow-app section.more .tile_four.page-one .item .screen, .project-page.mellow-app section.more .tile_four .item .screen, .project-page.mellow-app section.more .tile_four .item .screen .devices {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			.project-page.mellow-app section.more .tile_five .item .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			.project-page.mellow-app section.more .tile_five .item .screen .wrap .top {
				width: 100%;
				height: 49px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				background-position-y: bottom;
			}
			
			
			.project-page.mellow-app .composition .row_two .left p {
				font-size: 12px;
				line-height: 19px;
				padding-left: 20px;
				padding-right: 20px;
			}
			
			.project-page.mellow-app .composition .column.main-left .row_three svg {
				width: 70%;
			}
			
			.project-page.mellow-app .composition .column.main-right .row_four .left {
				width: 100%;
			}
			
			.project-page.mellow-app .composition .column.main-right .row_four .right {
				display: none;
			}
			
			.project-page.mellow-app .composition .column.main-right .row_four .left span, .project-page.mellow-app .composition .column.main-left .row_four .left span {
				display: none;
			}
			
			.project-page.mellow-app .composition .column.main-left .row_four .right {
				display: none;
			}
			
			.project-page.mellow-app .composition .column.main-left .row_four .left {
				width: 100%;
			}
			
			.project-page.mellow-app .composition .column.main-left .row_six .right img {
				max-width: 140px;
			}
			
			
			
			
			/*** finish ***/
			
			
			.project-page.mellow-app section.finish {
				height: 680px;
			}
			
			.project-page.mellow-app section.finish .item-1 .screen, .project-page.mellow-app section.finish .item-2 .screen, .project-page.mellow-app section.finish .item-3 .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
				background-position-y: bottom;
			}
			
			
			.project-page.mellow-app section.finish .item-2 .screen .success-icon {
				width: 33px;
				top: 105px;
			}
			
			.project-page.mellow-app section.finish .item-2 .screen .success-text {
				font-size: 10px;
				line-height: 14px;
				width: 125px;
				top: 147px;
			}
			
			.project-page.mellow-app section.finish .item-2 .screen .success-suggestion {
				width: 107px;
				top: 196px;
			}
			
			.project-page.mellow-app section.finish .item-2 .screen .success-noteating {
				font-size: 8px;
				padding: 1px;
				width: 77px;
				bottom: 77px;
			}
			
			.project-page.mellow-app section.finish .item-2 .screen .success-btns {
				width: 183px;
				bottom: 31px;
			}
			
			.project-page.mellow-app section.finish .item-2 .screen .bag-illustration {
				width: 138px;
				height: 278px;
			}
			
			.project-page.mellow-app section.finish .item-2 .screen .bag-text {
				font-size: 9px;
				width: 107px;
				top: 290px;
				line-height: 14px;
			}
			
			
			@-webkit-keyframes finish-success-icon {
				0% { transform: translateY(90px) scale(1.5); opacity: 0;}
				45% { transform: translateY(90px) scale(1.5); opacity: 0;}
				60% { transform: translateY(100px) 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(90px) scale(1.5); opacity: 0;}
				45% { transform: translateY(90px) scale(1.5); opacity: 0;}
				60% { transform: translateY(100px) scale(1);opacity: 1; }
				70% { transform: translateY(0px) scale(1);opacity: 1;}
				100% { transform: translateY(0px) scale(1);opacity: 1;}
			}
			
			
			@-webkit-keyframes finish-slide-right {
				0% { right: 0; opacity: 0;}
				10% {right: 0; opacity: 1;}
				100% { right: -495px; opacity: 1;}
			}
			
			@keyframes finish-slide-right {
				0% { right: 0; opacity: 0;}
				10% {right: 0; opacity: 1;}
				100% { right: -495px; opacity: 1;}
			}
			
			@-webkit-keyframes finish-slide-left {
				0% { left: 0; opacity: 0;}
				10% {left: 0; opacity: 1;}
				100% { left: -495px; opacity: 1;}
			}
			
			@keyframes finish-slide-left {
				0% { left: 0; opacity: 0;}
				10% {left: 0; opacity: 1;}
				100% { left: -495px; opacity: 1;}
			}
			
			
			
			/*** cooking ***/
			
			
			.project-page.mellow-app section.cooking .main {
				height: 1275px;
			}
			
			.project-page.mellow-app section.cooking .shadow {
				width: 231px;
				height: 466px;
				top: 2px;
				left: 1px;
				-moz-border-radius: 35px;
				-webkit-border-radius: 35px;
				border-radius: 35px;
			}
			
			
			.project-page.mellow-app section.cooking .main .item-1 .shadow {
				-webkit-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
				-moz-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
				box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
			}
			
			.project-page.mellow-app section.cooking .main .item-2 .shadow {
				-webkit-box-shadow: 21px -21px 21px 0px  rgba(174,79,31,0.3);
				-moz-box-shadow: 21px -21px 21px 0px rgba(174,79,31,0.3);
				box-shadow: 21px -21px 21px 0px rgba(174,79,31,0.3);
			}
			
			.project-page.mellow-app section.cooking .main .item-3 .shadow {
				-webkit-box-shadow: 21px 21px 21px 0px rgba(27,117,172,0.3);
				-moz-box-shadow: 21px 21px 21px 0px rgba(27,117,172,0.3);
				box-shadow: 21px 21px 21px 0px rgba(27,117,172,0.3);
			}
			
			.project-page.mellow-app section.cooking .main .item-4 .shadow {
				-webkit-box-shadow: -21px 21px 21px 0px rgba(174,79,31,0.3);
				-moz-box-shadow: -21px 21px 21px 0px rgba(174,79,31,0.3);
				box-shadow: -21px 21px 21px 0px rgba(174,79,31,0.3);
			}
			
			.project-page.mellow-app section.cooking .main .item-5 .shadow {
				-webkit-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
				-moz-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
				box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
			}
			
			.project-page.mellow-app section.cooking .main .item-1 {
				left: -520px;
				top: -670px;
			}
			
			.project-page.mellow-app section.cooking .main .item-2 {
				left: -1110px;
				bottom: -230px;
			}
			
			.project-page.mellow-app section.cooking .main .item-4 {
				right: -970px;
				top: -235px;
			}
			
			.project-page.mellow-app section.cooking .main .item-5 {
				right: -525px;
				bottom: -705px;
			}
			
			
			.project-page.mellow-app section.cooking .item .screen .top .status-bar {
				width: 178px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .top .arrow {
				width: 10px;
				top: 32px;
				left: 10px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .top .info {
				top: 31px;
			}
			
			.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: 8px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .top .info .cooking-status p {
				font-size: 6px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .top .info .doneneness {
				font-size: 7px;
				margin-top: 3px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .top .info .ingredient {
				font-size: 9px;
				margin-top: 7px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle {
				top: 126px;
				width: 204px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle h2 {
				font-size: 38px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle .temperature span {
				width: 6px;
				height: 6px;
				margin-top: 8px;
				margin-left: 1px;
				border: 2px solid white;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle h3 {
				font-size: 8px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle .time {
				margin-top: 10px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle h2 {
				font-size: 38px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle h3 {
				font-size: 8px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target {
				font-size: 8px;
				margin-top: 7px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target .time {
				padding: 1px 5px;
				margin-right: 5px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle .time {
				margin-top: 10px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target {
				font-size: 8px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .bottom {
				bottom: -3px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .bottom ul.dots {
				width: 25px;
				margin-bottom: 7px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li.one {
				margin-left: 3px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li {
				width: 3px;
				height: 3px;
				margin-right: 1px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .bottom .cooking-menu {
				width: 100%;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.steps p.ready {
				font-size: 9px;
				margin-top: 42px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.steps li {
				font-size: 8px;
				margin-bottom: 7px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.steps {
				top: 105px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.graph {
				top: 115px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle {
				width: 205px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.graph .title {
				font-size: 8px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.graph .desc {
				font-size: 6px;
				margin-bottom: 14px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.graph img {
				width: 161px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.graph .desc p:first-child {
				margin-right: 14px;
			}
			
			.project-page.mellow-app section.cooking .item .screen .middle.graph .desc p {
				margin-top: 3px;
			}
			
			
			/*** ingredient pages ***/
			
			
			.project-page.mellow-app section.ingredient-selection {
				min-height: 720px;
			}
			
			.project-page.mellow-app section.ingredient-selection.slide .item-3 {
			right: -500px;
			}
			
			.project-page.mellow-app section.ingredient-selection.slide .item-1 {
			left: -500px;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-1 .screen, .project-page.mellow-app section.ingredient-selection .item-2 .screen, .project-page.mellow-app section.ingredient-selection .item-3 .screen {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
				background-position-y: bottom;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen .title {
				font-size: 13px;
				top: 103px;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen .time-temp {
				font-size: 8px;
				top: 124px;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen .select-border {
			width: 49px;
			height: 13px;
			top: 152px;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen ul {
				top: 147px;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen ul li {
				font-size: 6px;
				margin-left: 21px;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen ul li:first-child {
				margin: 0;
			}
			
			.project-page.mellow-app section.ingredient-selection .item-2 .screen .desc {
				font-size: 6px;
				line-height: 8px;
				top: 173px;
			}
			
			@-webkit-keyframes ingredient-selection-middle {
				0% { transform: translateX(0px); }
				5% { transform: translateX(0px); }
				20% { transform: translateX(61px); }
				25% { transform: translateX(59px); }
				35% { transform: translateX(59px); }
				50% { transform: translateX(0px); }
				55% { transform: translateX(0px); }
				70% { transform: translateX(-61px); }
				75% { transform: translateX(-59px); }
				80% { transform: translateX(-59px); }
				95% { transform: translateX(3px); }
				100% { transform: translateX(0px);}
			}
			
			@keyframes ingredient-selection-middle {
				0% { transform: translateX(0px); }
				5% { transform: translateX(0px); }
				20% { transform: translateX(61px); }
				25% { transform: translateX(59px); }
				35% { transform: translateX(59px); }
				50% { transform: translateX(0px); }
				55% { transform: translateX(0px); }
				70% { transform: translateX(-61px); }
				75% { transform: translateX(-59px); }
				80% { transform: translateX(-59px); }
				95% { transform: translateX(3px); }
				100% { transform: translateX(0px);}
			}
			
			
			
			/*** MISCELANEOUS ***/
			
			
			.project-page.mellow-app section#icon {
				min-height: 1183px;
			}
			
			.project-page.mellow-app #icon>div:nth-of-type(1) {
				height: 1183px;
				-webkit-background-size: 1380px;
				-moz-background-size: 1380px;
				-o-background-size: 1380px;
				background-size: 1380px;	
			}
			
			
			
			
			
			/***** PMC WEBSITE *******/
			
			
			.project-page.pmc-website .mac-screen-home .screen {
				margin-top: -235px;
			}
			
			
			.project-page.pmc-website .mac-screen-home .bg {
				height: 400px;
			}
			
			
			.project-page.pmc-website section.website-mac .screen .border {
				width: 665px;
				height: 380px;
				border: 13px solid black;
			}
			
			.project-page.pmc-website section.website-mac .base img {
				width: 160px;
				height: 163px;
			}
			
			.project-page.pmc-website .mac-screen-project .bg {
				height: 540px;
				margin-top: -550px;
			}
			
			.project-page.pmc-website .mac-screen-project .screen .border img {
				width: 58px;
				height: 36px;
				margin-top: 15px;
			}
			
			.project-page.pmc-website .composition .column .blue-box .blue-bg p {
				font-size: 20px;
				line-height: 31px;
				width: 290px;
				height: 95px;
			}
			
			
			
			/*** PMC IDENTITY ***/
			
			
			.project-page.pmc-identity section.creation, .project-page.pmc-identity section.logo {
				height: 800px;
			}
			
			.project-page.pmc-identity section#logo-versions .content .left img {
				width: 240px;
			}
			
			.project-page.pmc-identity section#logo-versions .content .right img {
				width: 85px;
			}
			
			.project-page.pmc-identity section#font .left, .project-page.pmc-identity section#font .right {
				margin-top: 50px;
			}
			
			
			
			
			
			/*********** IX APP TABLET *************/
			
			
			
			.project-page.ix-app .app-icon img {
				width: 130px;
			}
			
			.project-page.ix-app section.ios-screens .device-tile .device-body img, .project-page.ix-app section.android .device-tile .device-body img, .project-page.ix-app section.windows .device-tile .device-body img {
				width: 233px;
			}
			
			
			.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: -281px;
			}
			
			.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: -251px;
			}
			
			.project-page.ix-app .ios .ios-main.content-1, .project-page.ix-app .ios .ios-main.content-2 {
				-webkit-background-size: 900px;
				-moz-background-size: 900px;
				-o-background-size: 900px;
				background-size: 900px;
			}
			
			.project-page.ix-app .ios .ios-main {
				height: 514px;
			}
			
			.project-page.ix-app .ios-screens .ios-main.content-3 {
				-webkit-background-size: 406px;
				-moz-background-size: 406px;
				-o-background-size: 406px;
				background-size: 406px;
				height: 46px;
			}
			
			
			
			
			/*** MISCELLANEOUS MAIN PAGE ***/
			
			
			.project-page.miscellaneous section.work.intro .project {
				width: 200px;
				margin-right: 17px;
				margin-left: 17px;
			}
			
			/*.project-page.miscellaneous section.work.intro .project .description {
				font-size: 8px;
			}*/
			
			
			
			
			
		
	
}















/*  #Mobile (Portrait)
================================================== */


@media only screen and (max-width: 767px) {

	
	.project-page section.work .project {
		margin-bottom: 60px;
		padding-bottom: 60px;
		border-bottom: 1px solid #EEE;
		height: unset;
	}
	
	.project-page section.work .project:first-child, .project-page section.work .project:last-child {
		border: none;
	}
	
	.project-page section.work .project:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.row {margin: 0 auto; padding-right: 20px;
	padding-left: 20px;}
	
	.project-page section.intro {
		height: auto;
	}
	
	.project-page section.intro .content .textbox {
		width: 70%;
		max-width: 310px;
		font-size: 9px;
		position: relative;
		padding-top: 170px;
		padding-bottom: 140px;
		height: auto!important;
	}
  
  .project-page.one section.intro .content .textbox {
    height: 350px;
    width: 270px;
  }
	
	.project-page section.logo {
	  height: 700px;
	}
	
	.project-page section.logo .content img {
	  width: 80%;
	}
	
	section#flowing {
	  display: none;
	}
	
	.project-page.one section.flowing-mobile {
	  display: block;
	  -webkit-background-size: 800px;
	  -moz-background-size: 800px;
	  -o-background-size: 800px;
	  background-size: 800px;
	}
	
	.project-page section#logo-versions .content .right, .project-page section#logo-versions .content .left {
	  display: block;
	  width: 100%;
	}
	
	.project-page section#composition {
/*	  -webkit-background-size: 320px;
	  -moz-background-size: 320px;
	  -o-background-size: 320px;
	  background-size: 320px;*/
		padding-top: 90px;
	}
	
	.project-page section.id-composition img {
		width: 90%;
	}
	
	.project-page.two-two section.grafics, .project-page.two-one section.grafics {
	  height: 300px;
	}
	
	.project-page.two-two section.web, .project-page.two-one section.web {
	  height: 330px;
	}
	
	.project-page.two-two section.web-two, .project-page.two-one section.web-two, .project-page.two-two section.web-three, .project-page.two-one section.web-three {
	  height: 210px;
	}
	
	.project-page section#composition .zoom {
		display: block;
	}
	
	/*.project-page.two section#composition .zoom a {
    height: 75px;
  }*/
  
  .project-page section#font .right img {
    margin-left: 20px;
  }
  
  .project-page section#font .left img {
    margin-right: 20px;
  }
	
	.project-page section#font .left, .project-page section#font .right {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	.project-page section#font {
	  /*-webkit-background-size: 320px;
	  -moz-background-size: 320px;
	  -o-background-size: 320px;
	  background-size: 320px;
	  background-position: center 95px;
	  height: 500px;*/
		padding-top: 50px;
		padding-bottom: 100px;
	}
	
	.project-page section.logo-footer {
	  height: 300px;
	}
	
	.project-page footer {
	  height: 310px;
	}
	
	.project-page footer .content .one, .project-page footer .content .two {
	  display: inline-block;
	  margin-top: 68px;
	  padding: 0;
	  width: 100%;
	}
	
	header .left {
	  margin-left: 20px;
	}
	
	header .right {
	  margin-right: 20px;
	}
	
	.project-page.entry header {
	  background: #f6f6f6;
	  border-bottom: 1px solid #DDD;
	  height: 65px;
	}
	
	.project-page section.intro {
	  min-height: 500px;
	}
	
	
	.project-page section.work {
		padding-top: 0px;
	}
	
	
	/******* BY PROJECT *********/
	
	
	/** WODER **/
	
	.project-page.woder-identity section.intro .content .textbox {
		height: 355px;
	}
	
	body.woder-identity #icon>div:nth-of-type(1) {
	  background: none;
	  height: 500px;
	}
	
	body.woder-identity section#icon {
	  background: url(../images/woder-identity/bg6.jpg) repeat center center;
	  height: 500px;
	  min-height: 500px;
	}
	
	body.woder-identity section#icon .parallax .content img {
	  margin-top: 205px;
	  width: 130px;
	}
	
	.project-page.woder-identity section#logo-versions .content .left img {
	  width: 80%;
		max-width: 250px;
	}
	
	.project-page.woder-identity section#logo-versions .content .right img {
	  width: 150px;
	}
	
	.project-page.woder-identity section#logo-versions .content .right img {
	  width: 55px;
	  margin-top: 100px;
	}
	
	
	
	/** WANDLE CO **/
	
	
	.project-page.wandle-identity section.intro .content .textbox {
		height: 285px;
	}
	
	.project-page.wandle-identity section.flowing-mobile {
		display: block;
	}
	
	.project-page.wandle-identity section#logo-versions .content .left img {
		width: 80%;
		max-width: 250px;
	}
	
	.project-page.wandle-identity section#logo-versions .content .right img {
		width: 150px;
		margin-top: 100px;
	}
	
	.project-page.wandle-identity section.id-composition img {
		width: 90%;
	}
	
	.project-page.wandle-identity section#font img {
		padding: 0;
		width: 80%;
		max-width: 400px;
	}
	
	
	
	/*** MELLOW IDENTITY **/
	
	
	
	.project-page.mellow-identity section.logo .content img {
		max-width: 150px;
	}
	
	
	.project-page.mellow-identity .id-sketches {
		height: 940px;
	}
	
	.project-page.mellow-identity .id-sketches .content {
		overflow: hidden;
	}
	
	.project-page.mellow-identity .id-sketches img.main {
	height: 230px;
	position: absolute;
	transform: translateY(0);
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	}
	
	
	.project-page.mellow-identity .id-sketches img.one {
		display: block;
		top: 120px;
		margin-top: 0;
		left: -140px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.one {
		display: block;
		top: 80px;
		margin-top: 0;
		left: -140px;
	}
	
	.project-page.mellow-identity .id-sketches img.two {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.two {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches img.three {
		top: 180px;
		left: 140px;
		margin-top: 0;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.three {
		top: 150px;
		left: 140px;
		margin-top: 0;
	}
	
	.project-page.mellow-identity .id-sketches img.four {
		top: 370px;
		left: -170px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.four {
		top: 310px;
		left: -170px;
	}
	
	.project-page.mellow-identity .id-sketches img.five {
		left: 50px;
		top: 350px;
		margin-top: 0;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.five {
		left: 50px;
		top: 320px;
		margin-top: 0;
	}

	
	.project-page.mellow-identity .id-sketches img.hardware {
		margin-top: 0;
		top: 450px;
		left: 40px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.hardware {
		margin-top: 0;
		top: 410px;
		left: 40px;
	}
	
	.project-page.mellow-identity .id-sketches img.six {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.six {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches img.seven {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.seven {
		display: none;
	}
	
	.project-page.mellow-identity .id-sketches img.eight {
		top: 530px;
		margin-top: 0;
		left: -150px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.eight {
		top: 500px;
		margin-top: 0;
		left: -150px;
	}
	
	.project-page.mellow-identity .id-sketches.sketchesfade img.nine {
		right: -120px;
		top: 500px;

	}
	
	.project-page.mellow-identity .id-sketches img.nine {
		right: -120px;
		top: 550px;

	}
	
	.project-page.mellow-identity .id-sketches img.details-one {
		width: 300px;
		left: 0;
	}
	
	.project-page.mellow-identity .id-sketches img.details-two {
		right: -20px;
		width: 300px;
	}
	
	
	
	
	.project-page.mellow-identity section.logo.logotype {
		height: 320px;
	}
	
	.project-page.mellow-identity section.logo.logotype img {
		max-width: 190px;
	}
	
	.project-page.mellow-identity .logo-versions .left img {
		max-width: 220px;
	}
	
	.project-page.mellow-identity .logo-versions .right .divider {
		height: 1px;
		width: 100%;
	}
	
	.project-page.mellow-identity .logo-versions .left, .project-page.mellow-identity .logo-versions .right {
		padding-top: 172px;
		padding-bottom: 172px;
	}
	
	.project-page.mellow-identity section#font  {
		padding-top: 0;
	}
	
	.project-page.mellow-identity section#font img {
		max-width: 350px;
		width: 80%;
		margin-top: 0px;
		padding-top: 20px;
		padding-bottom: 10px;
	}
	
	.project-page section.id-composition img.mobileonly {
		display: block;
	}
	
	.project-page section.id-composition img.composition-img {
		display: none;
	}
	
	.project-page.mellow-identity section.id-composition img.iphone {
	display: none;
	}
	
	.project-page.mellow-identity section#composition .zoom {
		margin-top: -40px;
	}
	
	
	/*** MELLOW WEBSITE ***/
	
	
	.project-page.mellow-website .website-img-intro .content.slideup {
		margin-top: -20px;
	}
	
	.project-page.mellow-website .pages {
		margin-top: -20px;
	}
	
	.project-page.mellow-website .website-img-intro .content.slideupmore {
		transform: translateY(-20px);
	}
	
	
	.project-page.mellow-website .composition .column, .project-page.pmc-website .composition .column {
		float: none;
		width: 100%;
	}
	
	.project-page.mellow-website .composition .column .desc-text .text {
		max-width: 270px;
		width: 90%;
		font-size: 13px;
		line-height: 26px;
	}
	
	.project-page.mellow-website .composition .column.main-left .content:last-child {
		border-bottom: 1px solid #E1E1E1;
	}	
	
	.project-page.mellow-website .composition .column .title-text .text {
		font-size: 35px;
		width: 200px;
	}
	
	.project-page.mellow-website .composition .column .content.info-icons img {
		position: relative;
		padding-top: 80px;
		padding-bottom: 80px;
	}
	
	.project-page.mellow-website .composition .column .content.info-icons {
		height: unset;
	}
	
	.project-page.mellow-website .composition .column .info-icons img {
		width: 70%;
		max-width: 223px;
	}
	
	.project-page.mellow-website .composition .column .cart-info .left img {
		width: 70px;
	}
	
	.project-page.mellow-website .composition .column .nav-cart .desktop {
		width: 80%;
	}
	
	.project-page.mellow-website .composition .column .nav-icons img {
		width: 70px;
	}
	
	.project-page.mellow-website .composition .column .nav-icons {
		height: 375px;
	}
	
	
	/*.project-page.mellow-website .pages {
		padding-top: 50px;
		padding-bottom: 150px;
	}
	
	.project-page.mellow-website .pages .page-one {
		width: 90%;
		transform: translateX(0px);
	}
	
	.project-page.mellow-website .pages .page-two {
		transform: translateX(-380px);
		margin-top: -100px;
		width: 500px;
	}
	
	.project-page.mellow-website .pages .page-three {
		width: 300px;
		margin-top: -430px;
		transform: translateX(50px);
	}
	
	.project-page.mellow-website .pages .element-one {
		width: 220px;
		height: 180px;
		transform: translateX(-90px);
		margin-top: -120px;
	}
	
	.project-page.mellow-website .pages .element-one img {
		margin-top: 32px;
		width: 25px;
	}
	
	.project-page.mellow-website .pages .element-one h1 {
		font-size: 9px;
		margin-bottom: 12px;
	}
	
	.project-page.mellow-website .pages .element-one p {
		font-size: 11px;
		width: 170px;
		line-height: 19px;
	}
	
	.project-page.mellow-website .pages .page-four {
		width: 650px;
		margin-top: 45px;
		transform: translateX(57px);
	}
	
	.project-page.mellow-website .pages .page-five {
		width: 660px;
		margin-top: -150px;
		transform: translateX(150px);
	}
	
	.project-page.mellow-website .pages .page-six {
		max-width: 417px;
		width: 80%;
		margin-top: 35px;
		transform: translateX(0px);
	}
	
	.project-page.mellow-website .pages .page-seven {
		width: 90%;
		margin-top: 30px;
	}
	
	.project-page.mellow-website .pages .page-eight {
		width: 430px;
		transform: translateX(-260px);
		margin-top: -110px;
	}
	
	.project-page.mellow-website .pages .page-eight img.top {
		width: 100%;
	}
	
	.project-page.mellow-website .pages .element-three {
		margin-top: -390px;
		transform: translateX(230px);
	}
	
	.project-page.mellow-website .pages .element-two {
		/*margin-top: -700px;
		transform: translateX(-150px);
		width: 210px;
		height: 110px;*!/
		display: none;
	}*/
	
	/*.project-page.mellow-website .pages .element-two img {
		margin-top: 39px;
		width: 130px;
	}*/
	
	
	
	.project-page.mellow-website .pages {
		padding-bottom: 80px;
		padding-top: 50px;
	}
	
	.project-page.mellow-website .pages .page-one {
		width: 285px;
	}
	
	.project-page.mellow-website .pages .page-two {
		width: 274px;
		transform: translateX(-127px);
		margin-top: 10px;
	}
	
	.project-page.mellow-website .pages .page-three {
		width: 157px;
		margin-top: -354px;
		transform: translateX(106px);
	}
	
	.project-page.mellow-website .pages .page-four {
		width: 498px;
		margin-top: 65px;
		transform: translateX(40px);
	}
	
	.project-page.mellow-website .pages .page-six {
		width: 147px;
		margin-top: -65px;
		transform: translateX(50px);
	}
	
	.project-page.mellow-website .pages .element-one, .project-page.mellow-website .pages .element-two, .project-page.mellow-website .pages .page-seven, .project-page.mellow-website .pages .page-eight {
		-webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.15);
		-moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.15);
		box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.15);
	}
	
	.project-page.mellow-website .pages .element-one {
		position: absolute;
		top: 710px;
		width: 132px;
		height: 124px;
		transform: translateX(-31px);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		margin-top: 180px;
	}
	
	.project-page.mellow-website .pages .element-one img {
		width: 16px;
		margin-top: 24px;
	}
	
	.project-page.mellow-website .pages .element-one h1 {
		font-size: 7px;
		margin-bottom: 12px;
	}
	
	.project-page.mellow-website .pages .element-one p {
		font-size: 8px;
		width: 92px;
		line-height: 9px;
		font-size: 6px;
	}
	
	.project-page.mellow-website .pages .page-five {
		width: 320px;
		position: absolute;
		top: 1090px;
		transform: translateX(0px);
		right: -30px;
		margin-top: -30px;
	}
	
	.project-page.mellow-website .pages .page-seven {
		margin-top: 410px;
		width: 484px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		transform: translateX(-283px);
	}
	
	.project-page.mellow-website .pages .element-two {
		display: block;
		position: absolute;
		width: 122px;
		height: 60px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		top: 1520px;
		right: -40px;
		margin-top: 0;
		transform: translateX(0px);
	}
	
	.project-page.mellow-website .pages .element-two img {
		width: 68px;
	}
	
	.project-page.mellow-website .pages .element-three {
		width: 132px;
		margin-top: 0;
		transform: translateX(0px);
		position: absolute;
		top: 1600px;
		right: -44px;
	}
	
	.project-page.mellow-website .pages .page-eight {
		width: 267px;
		transform: translateX(0px);
		margin-top: 32px;
	}
	
	
	
	
	
	
	
	/*** MELLOW APP MOBILE PORTRAIT ***/
			
			
			.project-page.mellow-app .grid-two {
				width: 100%;
			}
			
			.project-page.mellow-app section .border {
				display: none;
			}
			
			.project-page.mellow-app .title h2 {
				font-size: 11px;
			}
			
			
			.project-page.mellow-app .device-tile .item, .project-page.mellow-app section.finish .item, .project-page.mellow-app section.cooking .item, .project-page.mellow-app section.ingredient-selection .item {
				width: 233px;
				height: 470px;
			}
			
			.project-page.mellow-app .device .hardware, .project-page.mellow-app section.finish .hardware, .project-page.mellow-app section.cooking .hardware, .project-page.mellow-app section.ingredient-selection .hardware {
				width: 233px;
				height: 470px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
			}
			
			.project-page.mellow-app .device .shadow {
				width: 231px;
				height: 466px;
				top: 0;
				left: 0;
				-webkit-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
				-moz-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
				box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
			}
			
			
			.project-page.mellow-app .device .screen, .project-page.mellow-app section.finish .screen, .project-page.mellow-app section.cooking .screen, .project-page.mellow-app section.ingredient-selection .screen {
				top: 15px;
				left: 14px;
				width: 205px;
				height: 441px;
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;
			}
			
			
			.project-page.mellow-app section.home .title img, .project-page.mellow-app section.favorites .tile_one img, .project-page.mellow-app section.history .tile_one img, .project-page.mellow-app section.more .title img, .project-page.mellow-app section.manual-mode .title img {
				width: 275px;
			}
			
			
			
			
			/*** intro ***/
			
			
			.project-page.mellow-app section.app-img-intro {
				height: 625px;
				-webkit-background-size: 1260px;
				-moz-background-size: 1260px;
				-o-background-size: 1260px;
				background-size: 1260px;
			}
			
			
			
			/*** sign in ***/
			
			.project-page.mellow-app section.signup-login .signuplogin-welcome {
				-webkit-background-size: 100%;
				-moz-background-size: 100%;
				-o-background-size: 100%;
				background-size: 100%;	
			}
			
			
			.project-page.mellow-app section.signup-login .signuplogin-welcome .middle .mellow-logo, .project-page.mellow-app section.signup-login .tile_three .signuplogin-login .middle .mellow-logo {
				width: 60px;
				top: 35px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .message-one {
				width: 141px;
				top: 170px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .message-two {
				width: 154px;
				top: 140px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .btns, .project-page.mellow-app section.signup-login .signuplogin-login .middle .fb-btn, .project-page.mellow-app section.signup-login .signuplogin-login .middle .fields, .project-page.mellow-app section.signup-login .signuplogin-login .middle .login-btn {
				width: 183px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-welcome.screen .middle .btns, .project-page.mellow-app section.signup-login .signuplogin-login .middle .login-btn {
				bottom: 25px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-login .middle .fields {
				bottom: 70px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-login .middle .fb-btn {
				bottom: 160px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-login .middle .mellow-logo-desc {
				width: 22px;
				top: 50px;
			}
			
			.project-page.mellow-app section.signup-login .signuplogin-login .middle .arrow {
				width: 6px;
				top: 35px;
			}
			
			.project-page.mellow-app .grid-two {
				margin-top: 0px!important;
			}
			
			.project-page.mellow-app section.signup-login .tile_four .wrap {
				-webkit-background-size: 900px;	
				-moz-background-size: 900px;	
				-o-background-size: 900px;	
				background-size: 900px;	
			}
			
			
			.project-page.mellow-app section.signup-login .tile_four {
				height: 715px;
			}
			
			.project-page.mellow-app section.signup-login .grid-two.tile_one {
				height: 360px;
			}
			
			.project-page.mellow-app section.signup-login .tile_five {
				height: 355px;
				border-top: 1px solid #E1E1E1;
			}
			
			
				.project-page.mellow-app .item .screen .bottom .home-indicator {
					bottom: 4px;
					width: 70px;
					height: 3px;
				}
				
				.project-page.mellow-app .device-closeup .item {
					width: 280px;
					height: 344px;
				}
				
				.project-page.mellow-app .device-closeup .item .device .hardware {
					width: 280px;
					height: 344px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
				}
				
				.project-page.mellow-app section.home .device-closeup .item .device .screen {
					left: 18px;
					top: 15px;
					width: 245px;
					height: 330px;
				}
				
				.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: 245px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
				}
				
				.project-page.mellow-app section.home .pull-to-search .item .device .screen .middle {
					top: 65px;
				}
				
				.project-page.mellow-app section.home .device-closeup .item .device .screen .top img {
					width: 100%;
				}
				
				.project-page.mellow-app section.home .pull-to-search .item .device .screen .search {
					top: 10px;
				}
				
				.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .search-icon {
					width: 15px;
					top: 35px;
				}
				
				.project-page.mellow-app section.home .pull-to-search .item .device .screen .search .elements {
					width: 215px;
				}
				
				/*** SEARCH ***/
				
				@-webkit-keyframes home-details-search {
					0% { top: 0px;}
					100% { top: 50px; }
				}
				
				@keyframes home-details-search {
					0% { top: 0px;}
					100% { top: 50px; }
				}
				
				/*** SEARCH OFF ***/
				
				@-webkit-keyframes home-details-search-off {
					0% { top: 50px;}
					100% { top: 0px; }
				}
				
				@keyframes home-details-search-off {
					0% { top: 50px;}
					100% { top: 0px; }
				}
				
				/*** SEARCH LIST ***/
				
				@-webkit-keyframes home-details-search-list {
					0% { transform: translateY(0px); }
					100% { transform: translateY(60px); }
				}
				
				@keyframes home-details-search-list {
					0% { transform: translateY(0px); }
					100% { transform: translateY(60px); }
				}
				
				/*** SEARCH LIST OFF ***/
				
				@-webkit-keyframes home-details-search-list-off {
					0% { transform: translateY(60px); }
					100% { transform: translateY(0px); }
				}
				
				@keyframes home-details-search-list-off {
					0% { transform: translateY(60px); }
					100% { transform: translateY(0px); }
				}
				
				
				.project-page.mellow-app section.home .home-details .tile_three {
					margin-top: -227px;
				}
				
				.project-page.mellow-app section.home .title {
					height: 225px;
				}
				
				.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar {
					top: 58px;
					height: 40px;
					border-bottom: 0.5px solid #E1E1E3;
				}
				
				.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar p {
					font-size: 9px;
				}
				
				.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .bar-title  {
					top: 5px;
				}
				
			.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp, .project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .temp-off {
					top: 5px;
					right: 48px;
				}
				
				.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .switch {
					width: 30px;
					height: 19px;
					top: 10px;
				}
				
				.project-page.mellow-app section.home .pre-cooling .item .device .screen .pre-cooling-bar .help {
					width: 11px;
					top: 14px;
					left: 89px;
				}
				
				.project-page.mellow-app section.home .pre-cooling .item .device .screen .middle {
					top: 108px;
				}
				
				.project-page.mellow-app section.home .notification .item .device .screen .top {
					width: 245px;
					height: 30px;
					top: 27px;
					-webkit-border-top-right-radius: 10px;
					-moz-border-radius-topright: 10px;
					border-top-right-radius: 10px;
				}
				
				.project-page.mellow-app section.home .notification .item .device .screen .middle {
					top: 47px;
				}
				
				.project-page.mellow-app section.home .notification .item .device .screen .notification-screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
				}
				
				
				.project-page.mellow-app section.home .notification .item .device .screen .notification-top img, .project-page.mellow-app section.home .notification.animate-off .item .device .screen .top img {
					width: 100%;
				}
				
				
				/*** NOTIFICATION ***/
				
				@-webkit-keyframes home-details-notification {
					0% { transform: translateX(0);}
					100% { transform: translateX(-215px);}
				}
				
				@keyframes home-details-notification {
					0% { transform: translateX(0);}
					100% { transform: translateX(-215px);}
				}
				
				/*** NOTIFICATION OFF ***/
				
				@-webkit-keyframes home-details-notification-off {
					0% { transform: translateX(-215px);}
					100% { transform: translateX(0);}
				}
				
				@keyframes home-details-notification-off {
					0% { transform: translateX(-215px);}
					100% { transform: translateX(0);}
				}
				
				.project-page.mellow-app section.home .home-details .tile_five {
					border-top: 1px solid #E1E1E1;
					height: 350px;
				}
				
				.project-page.mellow-app section.cooking .color-description .wrap .grid-three {
					width: 32%;
				}
				
				
				/*** pairing ***/
				
				
				.project-page.mellow-app section.pairing .screen .middle {
					height: 345px;
					top: 50px;
				}
				
				.project-page.mellow-app section.pairing .screen.welcome .welcome-bg img {
					width: 100%;
				}
				
				.project-page.mellow-app section.pairing .welcome .middle .welcome-icon {
					width: 204px;
				}
				
				.project-page.mellow-app section.pairing .welcome .middle .welcome-text {
					width: 127px;
					top: 255px;
				}
				
				.project-page.mellow-app section.pairing .screen .bottom {
					width: 100%;
					height: 45px;
				}
				
				.project-page.mellow-app section.pairing .screen .bottom p {
					font-size: 9px;
				}
				
				
				.project-page.mellow-app section.pairing .screen.welcome .bottom p {
					margin-top: 9px;
					margin-bottom: 9px;
				}
				
				
				.project-page.mellow-app section.pairing .tile_three .screen-wifi .screen-img img {
					width: 100%;
				}
				
				.project-page.mellow-app section.pairing .tile_three .middle img.wifi-icon {
					width: 70px;
					top: 63px;
				}
				
				.project-page.mellow-app section.pairing .tile_three .middle img.wifi-text {
					width: 87px;
					top: 136px;
				}
				
				.project-page.mellow-app section.pairing .tile_three .middle img.wifi-fields {
					width: 183px;
					top: 245px;
				}
				
				.project-page.mellow-app section.pairing .screen .bottom p {
					margin-top: 10px;
				}
				
				
				.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow .shadow {
					-webkit-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
					-moz-box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
					box-shadow: 21px 21px 21px 0px rgba(172,146,119,0.5);
				}
				
				
				.project-page.mellow-app section.pairing .screen .screen-img {
					width: 100%;
				}
				
				.project-page.mellow-app section.pairing .screen .screen-img img {
					width: 100%;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .mellow-illustration {
					width: 175px;
					height: 161px;
					top: 42px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-bg {
					width: 163.1px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-base-top {
					width: 40.6px;
					top: 93px;
					left: 91.7px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-vat {
					width: 77px;
					left: 55.3px;
					top: 18.9px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-lid {
					width: 72.8px;
					left: 56.7px;
					top: 16.8px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-base {
					width: 93.1px;
					left: 40.6px;
					top: 29.4px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-light-orange, .project-page.mellow-app section.pairing .tile_five.animate .screen .middle .machine-light-green {
					width: 17.5px;
					top: 39.2px;
					left: 58.8px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .machine-wall-plug {
					width: 17.5px;
					left: 11.9px;
					top: 75.6px;
				}
				
				
				
				.project-page.mellow-app section.pairing .screen .middle .machine-cable {
					width: 42.7px;
					left: 18.9px;
					top: 93.1px;
				}
				
				
				.project-page.mellow-app section.pairing .screen .middle .text {
					top: 241.5px;
				}
				
				.project-page.mellow-app section.pairing .screen .middle .text img {
					width: 137.9px;
				}
				
				.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration {
					top: 42px;
				}
				
				
				.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand-light {
					left: 53.9px;
					top: 30.8px;
					width: 51.8px;
				}
				
				.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand-vibrate {
					left: 65.8px;
					top: 37.1px;
					width: 23.8px;
				}
				
				.project-page.mellow-app section.pairing .tile_five .screen .middle .hand-illustration .machine-hand {
					left: 29.4px;
					top: 42px;
					width: 66.5px;
				}
				
				
				.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting .waiting-icon {
					top: 98px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-icon {
					top: 84px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .middle .waiting-icon {
					width: 43.4px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .middle.waiting .waiting-text {
					top: 161px;
					width: 99.4px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-text {
					top: 147px;
					width: 109.9px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .middle.success .waiting-name {
				top: 224px;
				width: 107.1px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .waiting-desc {
					height: 98px;
				}
				
				.project-page.mellow-app section.pairing .tile_six .screen .waiting-desc img {
				margin-top: 24.5px;
				width: 154px;
				}
				
				.project-page.mellow-app section.pairing .tile_four, .project-page.mellow-app section.pairing .tile_six {
					margin-top: -355px;
				}
				
				.project-page.mellow-app section.pairing .tile_two, .project-page.mellow-app section.pairing .title.tile_seven {
					height: 355px;
					border-top: 1px solid #E1E1E1;
				}
				
				
				/*** onboarding ***/
				
				.project-page.mellow-app section.onboarding {
					-webkit-background-size: 770px;
					-moz-background-size: 770px;
					-o-background-size: 770px;
					background-size: 770px;
					height: 660px;
				}
				
				
				
				
				/*** home ***/
				
				
				.project-page.mellow-app section.home .home-details .tile_one {
					display: none;
				}
				
				.project-page.mellow-app section.home .home-iphone {
					height: 560px;
					border: none;
				}
				
				.project-page.mellow-app section.home .home-iphone .wrap-shadow .top img, .project-page.mellow-app section.home .home-iphone .wrap-shadow .bottom img, .project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar img {
					width: 100%;
				}
				
				.project-page.mellow-app section.home .home-iphone .wrap-shadow .bottom {
					width: 100%;
					height: 46.9px;
				}
				
				.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar {
					width: 100%;
					height: 28px;
					bottom: 0px;
				}
				
				.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p.status {
					font-size: 5px;
					top: 6px;
				}
				
				.project-page.mellow-app section.home .home-iphone .wrap-shadow .cooking-bar p.ingredient {
					font-size: 7.5px;
					top: 13px;
				}
				
				.project-page.mellow-app section.home .home-iphone.iphoneshadow .wrap-shadow .cooking-bar {
					transform: translateY(-47px);
				}
	
				.project-page.mellow-app section.home .home-iphone .wrap-shadow .middle {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					top: -65px;
					height: 460px;
				}
				
				@-webkit-keyframes home-list-scroll {
					0% { transform: translateY(0px); }
					70% { transform: translateY(120px); }
					100% { transform: translateY(112px); }
				}
				
				@keyframes home-list-scroll {
					0% { transform: translateY(0px); }
					70% { transform: translateY(120px); }
					100% { transform: translateY(112px); }
				}
				
				@-webkit-keyframes home-list-scroll-off {
					0% { transform: translateY(112px); }
					70% { transform: translateY(-8px); }
					100% { transform: translateY(0px); }
				}
				
				@keyframes home-list-scroll-off {
					0% { transform: translateY(112px); }
					70% { transform: translateY(-8px); }
					100% { transform: translateY(0px); }
				}
				
				
				.project-page.mellow-app section.favorites .tile_six {
					border-top: 1px solid #E1E1E1;
				}
				
				.project-page.mellow-app section.favorites .tile_two .item .screen .wrap .top img, .project-page.mellow-app section.favorites .tile_two .item .screen .wrap .bottom img {
					width: 100%;
				}
				
				.project-page.mellow-app section.favorites .tile_two .item .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					background-position-y: -99px;
				}
				
				@-webkit-keyframes favorites-list-scroll {
					0% { background-position-y: -99px; }
					70% { background-position-y: 58px; }
					100% { background-position-y: 48px; }
				}
				
				@keyframes favorites-list-scroll {
					0% { background-position-y: -99px; }
					70% { background-position-y: 58px; }
					100% { background-position-y: 48px; }
				}
				
				@-webkit-keyframes favorites-list-scroll-off {
					0% { background-position-y: 48px; }
					70% { background-position-y: -109px; }
					100% { background-position-y: -99px; }
				}
				
				@keyframes favorites-list-scroll-off {
					0% { background-position-y: 48px; }
					70% { background-position-y: -109px; }
					100% { background-position-y: -99px; }
				}
				
				.project-page.mellow-app section.favorites .tile_three .item .screen .wrap .top img, .project-page.mellow-app section.favorites .tile_three .item .screen .wrap .bottom img {
					width: 100%;
				}
				
				.project-page.mellow-app section.favorites .tile_three .item .screen .middle, .project-page.mellow-app section.favorites .tile_four .item .screen .middle {
					-webkit-background-size: 141px;	
					-moz-background-size: 141px;	
					-o-background-size: 141px;	
					background-size: 141px;	
				}
				
				.project-page.mellow-app section.favorites .tile_three, .project-page.mellow-app section.favorites .tile_five {
					margin-top: -320px;
				}
				
				.project-page.mellow-app section.favorites .tile_four .item .top-screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					height: 441px;
				}
				
				.project-page.mellow-app section.favorites .tile_four.animate .item .top-screen {
					top: -4px;
				}
				
				.project-page.mellow-app section.favorites .tile_four .item .status-bar {
					width: 100%;
				}
				
				
				
				
				.project-page.mellow-app section.favorites .tile_four .item .screen .wrap .top img, .project-page.mellow-app section.favorites .tile_four .item .screen .wrap .bottom img {
					width: 100%;
				}
				
				.project-page.mellow-app section.favorites .tile_five .item .screen, .project-page.mellow-app section.manual-mode .tile_two .item .screen, .project-page.mellow-app section.manual-mode .tile_three .item .screen, .project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .bg, .project-page.mellow-app section.manual-mode .tile_four .item .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					background-position-y: bottom;
				}
			
				
				.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul {
					top: 82px;
				}
				
				.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li {
					width: 31px;
					height: 34px;
				}
				
				
				.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li img.add-btn {
					width: 13px;
				}
				
				.project-page.mellow-app section.favorites .tile_five .item .screen .wrap ul li img.added-btn {
					width: 8px;
				}
				
				
				/*** manual mode ***/
				
				
				.project-page.mellow-app section.manual-mode .tile_five, .project-page.mellow-app section.manual-mode .tile_one {
					height: 350px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_three, .project-page.mellow-app section.manual-mode .tile_five {
					margin-top: -360px;
				}
				
				
				.project-page.mellow-app section.manual-mode .tile_two .item .screen .middle img {
					width: 68px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_two .item .screen .middle {
					left: 80px;
					top: 136px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .bg {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
				}
				
				.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info {
					width: 140px;
					top: 108px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info .text {
					font-size: 8px;
					line-height: 14px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .info .ps {
					font-size: 7px;
					line-height: 11px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_three .item .screen .picker-screen .picker img {
					width: 100%;
				}
				
				.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle {
					top: 164px;
					left: -54px;
					width: 315px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .change {
					font-size: 6px;
					max-width: 43px;
					margin: 14px auto 0;
				}
				
				.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: 15px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box .for {
				font-size: 6px;
				margin-bottom: 3px;
				margin-top: 3px;
				}
				
				.project-page.mellow-app section.manual-mode .tile_four .item .screen .middle .box {
					margin-right: 24px;
					width: 77px;
				}
				
				.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.animate .box-wrapper {
					transform: translate(105px, 0px);
				}
				
				/*** BOX SLIDE ***/
				
				
				@-webkit-keyframes manual-mode-middle-slide {
					0% { transform: translate(105px, 20px); opacity: 0; }
					100% { transform: translate(105px, 0px); opacity: 1;}
				}
				
				@keyframes manual-mode-middle-slide {
					0% { transform: translate(105px, 20px); opacity: 0; }
					100% { transform: translate(105px, 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(105px); opacity: 1; }
					20% { transform: translateX(0px); opacity: 1; }
					25% { transform: translateX(0px); opacity: 1; }
					35% { transform: translateX(-110px); opacity: 1; }
					45% { transform: translateX(-105px); opacity: 1; }
					55% { transform: translateX(-105px); opacity: 1;}
					65% {  transform: translateX(7px); opacity: 1;}
					80% {  transform: translateX(0px); opacity: 1;}
					100% { transform: translateX(0px); opacity: 1;}
				}
				
				@keyframes manual-mode-middle {
					0% { transform: translateX(105px); opacity: 1; }
					20% { transform: translateX(0px); opacity: 1; }
					25% { transform: translateX(0px); opacity: 1; }
					35% { transform: translateX(-110px); opacity: 1; }
					45% { transform: translateX(-105px); opacity: 1; }
					55% { transform: translateX(-105px); opacity: 1;}
					65% {  transform: translateX(7px); opacity: 1;}
					80% {  transform: translateX(0px); opacity: 1;}
					100% { transform: translateX(0px); opacity: 1;}
				}
				
				
				
				/*** cooking ***/
				
				.project-page.mellow-app section.cooking .color-description .wrap .item-6::before, .project-page.mellow-app section.cooking .color-description .wrap .item-7::before {
					display: none;
				}
				
				.project-page.mellow-app section.cooking .color-description  {
					height: 750px;
					display: block;
					vertical-align: none;
				}
				
				.project-page.mellow-app section.cooking .color-description .wrap {
					height: 525px;
				}
				
				.project-page.mellow-app section.cooking .color-description .wrap .grid-three {
					display: block;
					width: 100%;
					height: 110px;
				}
				
				.project-page.mellow-app section.cooking .color-description .wrap .grid-three img {
					width: 90px;
				}
				
				.project-page.mellow-app section.cooking .color-description .wrap .grid-three p {
					font-size: 10px;
				}
				
				
				/*** history ***/
				
				.project-page.mellow-app section.history .tile_one {
					height: 350px;
				}
				
				.project-page.mellow-app section.history .tile_three {
					margin-top: -361px;
				}
				
				.project-page.mellow-app section.history .tile_five {
					height: 350px;
					border-top: 1px solid #E1E1E1;
				}
				
				
				.project-page.mellow-app section.history .device-tile .item .screen .wrap .top {
					width: 100%;
					height: 49px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
				}
				
				.project-page.mellow-app section.history .tile_two .item .screen, .project-page.mellow-app section.history .tile_three .item .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
					background-position-y: 22px;
				}
				
				.project-page.mellow-app section.history .device-tile .item .screen .wrap .bottom {
					width: 100%;
					height: 46px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
					background-position-y: top;
				}
				
				@-webkit-keyframes history-list-scroll {
					0% { background-position-y: -170px; }
					80% { background-position-y: 32px; }
					100% { background-position-y: 22px; }
				}
				
				@keyframes history-list-scroll {
					0% { background-position-y: -170px; }
					80% { background-position-y: 32px; }
					100% { background-position-y: 22px; }
				}
				
				@-webkit-keyframes history-list-scroll-off {
					0% { background-position-y: 22px; }
					80% { background-position-y: -180px; }
					100% { background-position-y: -170px; }
				}
				
				@keyframes history-list-scroll-off {
					0% { background-position-y: 22px; }
					80% { background-position-y: -180px; }
					100% { background-position-y: -170px; }
				}
				
				.project-page.mellow-app section.history .tile_three .item .screen .wrap .popup {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					height: 200px;
				}
				
				.project-page.mellow-app section.history .tile_four .item .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
				}
				
				
				@-webkit-keyframes history-detail {
					0% { background-position-y: 32px; }
					60% { background-position-y: -90px; }
					100% { background-position-y: -80px; }
				}
				
				@keyframes history-detail {
					0% { background-position-y: 32px; }
					60% { background-position-y: -90px; }
					100% { background-position-y: -80px; }
				}
				
				@-webkit-keyframes history-detail-off {
					0% { background-position-y: -80px; }
					80% { background-position-y: 42px; }
					100% { background-position-y: 32px; }
				}
				
				@keyframes history-detail-off {
					0% { background-position-y: -80px; }
					80% { background-position-y: 42px; }
					100% { background-position-y: 32px; }
				}
				
				
				/*** more ***/
				
				
				.project-page.mellow-app section.more .tile_two {
					height: 350px;
				}
				
				.project-page.mellow-app section.more .tile_six {
					height: 350px;
					border-top: 1px solid #E1E1E1;
				}
				
				
				.project-page.mellow-app section.more .tile_one .item .screen, .project-page.mellow-app section.more .tile_three .item .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
				}
				
				
				.project-page.mellow-app section.more .device-tile .item .screen .wrap .bottom {
					width: 100%;
					height: 46px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					background-position-y: top;
				}
				
				.project-page.mellow-app section.more .device-tile .item .screen .wrap .disconnected, .project-page.mellow-app section.more .device-tile .item .screen .wrap .temperature {
					top: 155px;
				}
				
				.project-page.mellow-app section.more .device-tile .item .screen .wrap .temperature img {
					width: 23px;
				}
				
				.project-page.mellow-app section.more .device-tile .item .screen .wrap .disconnected img {
					width: 55px;
				}
				
				.project-page.mellow-app section.more .device-tile .item .screen .wrap .connected-message img {
					width: 159px;
				}
				
				@-webkit-keyframes more-connected-msg {
					0% { bottom: 0px; opacity: 0; }
					10% { bottom: 53px; opacity: 1; }
					20% { bottom: 48px; opacity: 1; }
					80% { bottom: 48px; opacity: 1; }
					100% { bottom: 0px; opacity: 0;}
				}
				
				@keyframes more-connected-msg {
					0% { bottom: 0px; opacity: 0; }
					10% { bottom: 53px; opacity: 1; }
					20% { bottom: 48px; opacity: 1; }
					80% { bottom: 48px; opacity: 1; }
					100% { bottom: 0px; opacity: 0;}
				}
				
				.project-page.mellow-app section.more .tile_three .item .screen .wrap {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					background-position-y: bottom;
				}
				
				.project-page.mellow-app section.more .tile_three .item .screen .wrap .mellow-device-list {
					width: 340px;
					height: 196px;
					top: 20px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
				}
				
				@-webkit-keyframes more-mellow-devices {
					0% { left: 145px; opacity: 0; }
					20% { left: 55px; opacity: 1; }
					40% { left: 55px; opacity: 1; }
					50% { left: -62px; opacity: 1; }
					60% { left: -62px; opacity: 1; }
					70% { left: -175px; opacity: 1; }
					80% { left: -175px; 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: -62px; opacity: 1; }
					60% { left: -62px; opacity: 1; }
					70% { left: -175px; opacity: 1; }
					80% { left: -175px; opacity: 1; }
					100% { left: 55px; opacity: 1; }
				}
				
				.project-page.mellow-app section.more .tile_four.page-one .item .screen, .project-page.mellow-app section.more .tile_four .item .screen, .project-page.mellow-app section.more .tile_four .item .screen .devices {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
				}
				
				.project-page.mellow-app section.more .tile_five .item .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
				}
				
				.project-page.mellow-app section.more .tile_five .item .screen .wrap .top {
					width: 100%;
					height: 49px;
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					background-position-y: bottom;
				}
				
				
				.project-page.mellow-app .composition .row_two .left p {
					font-size: 12px;
					line-height: 19px;
					padding-left: 20px;
					padding-right: 20px;
				}
				
				.project-page.mellow-app .composition .column.main-left .row_three svg {
					width: 70%;
				}
				
				.project-page.mellow-app .composition .column.main-right .row_four .left {
					width: 100%;
				}
				
				.project-page.mellow-app .composition .column.main-right .row_four .right {
					display: none;
				}
				
				.project-page.mellow-app .composition .column.main-right .row_four .left span, .project-page.mellow-app .composition .column.main-left .row_four .left span {
					display: none;
				}
				
				.project-page.mellow-app .composition .column.main-left .row_four .right {
					display: none;
				}
				
				.project-page.mellow-app .composition .column.main-left .row_four .left {
					width: 100%;
				}
				
				.project-page.mellow-app .composition .column.main-left .row_six .right img {
					max-width: 140px;
				}
				
				
				
				
				/*** finish ***/
				
				
				.project-page.mellow-app section.finish {
					height: 1680px;
					-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.finish .item-1 .screen, .project-page.mellow-app section.finish .item-2 .screen, .project-page.mellow-app section.finish .item-3 .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;
					background-position-y: bottom;
				}
				
				
				.project-page.mellow-app section.finish .item-2 .screen .success-icon {
					width: 33px;
					top: 105px;
				}
				
				.project-page.mellow-app section.finish .item-2 .screen .success-text {
					font-size: 10px;
					line-height: 14px;
					width: 125px;
					top: 147px;
				}
				
				.project-page.mellow-app section.finish .item-2 .screen .success-suggestion {
					width: 107px;
					top: 196px;
				}
				
				.project-page.mellow-app section.finish .item-2 .screen .success-noteating {
					font-size: 8px;
					padding: 1px;
					width: 77px;
					bottom: 77px;
				}
				
				.project-page.mellow-app section.finish .item-2 .screen .success-btns {
					width: 183px;
					bottom: 31px;
				}
				
				.project-page.mellow-app section.finish .item-2 .screen .bag-illustration {
					width: 138px;
					height: 278px;
				}
				
				.project-page.mellow-app section.finish .item-2 .screen .bag-text {
					font-size: 9px;
					width: 107px;
					top: 290px;
					line-height: 14px;
				}
				
				.project-page.mellow-app section.finish .item-1 {
					top: 0px;
					opacity: 1;
				}
				
				.project-page.mellow-app section.finish.slide .item-1, .project-page.mellow-app section.finish.slide .item-3 {
					animation: none;
				}
				
				.project-page.mellow-app section.finish .item-2 {
					top: -970px;
				}
				
				.project-page.mellow-app section.finish .item-3 {
					bottom: -970px;
					opacity: 1;
				}
				
				
				@-webkit-keyframes finish-success-icon {
					0% { transform: translateY(90px) scale(1.5); opacity: 0;}
					45% { transform: translateY(90px) scale(1.5); opacity: 0;}
					60% { transform: translateY(100px) 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(90px) scale(1.5); opacity: 0;}
					45% { transform: translateY(90px) scale(1.5); opacity: 0;}
					60% { transform: translateY(100px) scale(1);opacity: 1; }
					70% { transform: translateY(0px) scale(1);opacity: 1;}
					100% { transform: translateY(0px) scale(1);opacity: 1;}
				}
				
				
				@-webkit-keyframes finish-slide-right {
					0% { right: 0; bottom: -300px; opacity: 0;}
					100% { right: 0; bottom: -970px; opacity: 1;}
				}
				
				@keyframes finish-slide-right {
					0% { right: 0; bottom: -300px; opacity: 0;}
					100% { right: 0; bottom: -970px; opacity: 1;}
				}
				
				@-webkit-keyframes finish-slide-left {
					0% { left: 0; top: -300px; opacity: 0;}
					100% { left: 0; top: -970px; opacity: 1;}
				}
				
				@keyframes finish-slide-left {
					0% { left: 0; top: -300px; opacity: 0;}
					100% { left: 0; top: -970px; opacity: 1;}
				}
				
				
				
				/*** cooking ***/
				
				
				.project-page.mellow-app section.cooking .main {
					height: 1275px;
				}
				
				.project-page.mellow-app section.cooking .shadow {
					width: 231px;
					height: 466px;
					top: 2px;
					left: 1px;
					-moz-border-radius: 35px;
					-webkit-border-radius: 35px;
					border-radius: 35px;
				}
				
				
				.project-page.mellow-app section.cooking .main .item-1 .shadow {
					-webkit-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
					-moz-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
					box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
				}
				
				.project-page.mellow-app section.cooking .main .item-2 .shadow {
					-webkit-box-shadow: 21px -21px 21px 0px  rgba(174,79,31,0.3);
					-moz-box-shadow: 21px -21px 21px 0px rgba(174,79,31,0.3);
					box-shadow: 21px -21px 21px 0px rgba(174,79,31,0.3);
				}
				
				.project-page.mellow-app section.cooking .main .item-3 .shadow {
					-webkit-box-shadow: 21px 21px 21px 0px rgba(27,117,172,0.3);
					-moz-box-shadow: 21px 21px 21px 0px rgba(27,117,172,0.3);
					box-shadow: 21px 21px 21px 0px rgba(27,117,172,0.3);
				}
				
				.project-page.mellow-app section.cooking .main .item-4 .shadow {
					-webkit-box-shadow: -21px 21px 21px 0px rgba(174,79,31,0.3);
					-moz-box-shadow: -21px 21px 21px 0px rgba(174,79,31,0.3);
					box-shadow: -21px 21px 21px 0px rgba(174,79,31,0.3);
				}
				
				.project-page.mellow-app section.cooking .main .item-5 .shadow {
					-webkit-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
					-moz-box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
					box-shadow: 21px 21px 21px 0px rgba(111,48,93,0.3);
				}
				
				.project-page.mellow-app section.cooking .main .item-1 {
					left: -520px;
					top: -670px;
				}
				
				.project-page.mellow-app section.cooking .main .item-2 {
					left: -1110px;
					bottom: -230px;
				}
				
				.project-page.mellow-app section.cooking .main .item-4 {
					right: -970px;
					top: -235px;
				}
				
				.project-page.mellow-app section.cooking .main .item-5 {
					right: -525px;
					bottom: -705px;
				}
				
				
				.project-page.mellow-app section.cooking .item .screen .top .status-bar {
					width: 178px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .top .arrow {
					width: 10px;
					top: 32px;
					left: 10px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .top .info {
					top: 31px;
				}
				
				.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: 8px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .top .info .cooking-status p {
					font-size: 6px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .top .info .doneneness {
					font-size: 7px;
					margin-top: 3px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .top .info .ingredient {
					font-size: 9px;
					margin-top: 7px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle {
					top: 126px;
					width: 204px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle h2 {
					font-size: 38px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle .temperature span {
					width: 6px;
					height: 6px;
					margin-top: 8px;
					margin-left: 1px;
					border: 2px solid white;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle h3 {
					font-size: 8px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle .time {
					margin-top: 10px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle h2 {
					font-size: 38px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle h3 {
					font-size: 8px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target {
					font-size: 8px;
					margin-top: 7px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target .time {
					padding: 1px 5px;
					margin-right: 5px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle .time {
					margin-top: 10px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle .switch-time-target {
					font-size: 8px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .bottom {
					bottom: -3px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .bottom ul.dots {
					width: 25px;
					margin-bottom: 7px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li.one {
					margin-left: 3px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .bottom ul.dots li {
					width: 3px;
					height: 3px;
					margin-right: 1px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .bottom .cooking-menu {
					width: 100%;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.steps p.ready {
					font-size: 9px;
					margin-top: 42px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.steps li {
					font-size: 8px;
					margin-bottom: 7px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.steps {
					top: 105px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.graph {
					top: 115px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle {
					width: 205px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.graph .title {
					font-size: 8px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.graph .desc {
					font-size: 6px;
					margin-bottom: 14px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.graph img {
					width: 161px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.graph .desc p:first-child {
					margin-right: 14px;
				}
				
				.project-page.mellow-app section.cooking .item .screen .middle.graph .desc p {
					margin-top: 3px;
				}
				
				
				/*** ingredient pages ***/
				
				
				
				.project-page.mellow-app section.ingredient-selection {
					min-height: 1380px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-3 {
					right: 0;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-1 {
					left: 0;
					z-index: 1000;
				}
				
				.project-page.mellow-app section.ingredient-selection.slide .item-3 {
					right: 0;
					top: -720px;
				}
				
				.project-page.mellow-app section.ingredient-selection.slide .item-1 {
					left: 0;
					bottom: -720px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-1 .screen, .project-page.mellow-app section.ingredient-selection .item-2 .screen, .project-page.mellow-app section.ingredient-selection .item-3 .screen {
					-webkit-background-size: 100%;
					-moz-background-size: 100%;
					-o-background-size: 100%;
					background-size: 100%;	
					background-position-y: bottom;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen .title {
					font-size: 13px;
					top: 103px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen .time-temp {
					font-size: 8px;
					top: 124px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen .select-border {
				width: 49px;
				height: 13px;
				top: 152px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen ul {
					top: 147px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen ul li {
					font-size: 6px;
					margin-left: 21px;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen ul li:first-child {
					margin: 0;
				}
				
				.project-page.mellow-app section.ingredient-selection .item-2 .screen .desc {
					font-size: 6px;
					line-height: 8px;
					top: 173px;
				}
				
				@-webkit-keyframes ingredient-selection-middle {
					0% { transform: translateX(0px); }
					5% { transform: translateX(0px); }
					20% { transform: translateX(61px); }
					25% { transform: translateX(59px); }
					35% { transform: translateX(59px); }
					50% { transform: translateX(0px); }
					55% { transform: translateX(0px); }
					70% { transform: translateX(-61px); }
					75% { transform: translateX(-59px); }
					80% { transform: translateX(-59px); }
					95% { transform: translateX(3px); }
					100% { transform: translateX(0px);}
				}
				
				@keyframes ingredient-selection-middle {
					0% { transform: translateX(0px); }
					5% { transform: translateX(0px); }
					20% { transform: translateX(61px); }
					25% { transform: translateX(59px); }
					35% { transform: translateX(59px); }
					50% { transform: translateX(0px); }
					55% { transform: translateX(0px); }
					70% { transform: translateX(-61px); }
					75% { transform: translateX(-59px); }
					80% { transform: translateX(-59px); }
					95% { transform: translateX(3px); }
					100% { transform: translateX(0px);}
				}
				
				
				
				/*** MISCELANEOUS ***/
				
				
				.project-page.mellow-app .composition .column {
					width: 100%;
				}
				
				.project-page.mellow-app .composition .column.main-left .content {
					border-right: none;
				}
				
				.project-page.mellow-app .composition .column.main-right .content.row_six {
					border-top: 1px solid #E1E1E1;
				}
				
				.project-page.mellow-app .composition .main-last .icons {
					width: 50%;
					height: 130px;
					border-bottom: 1px solid #E1E1E1;
				}
				
				.project-page.mellow-app .composition .main-last {
					border: none;
				}
				
				.project-page.mellow-app .composition .main-last .icons:nth-child(2)::before, .project-page.mellow-app .composition .main-last .icons:nth-child(4)::before, .project-page.mellow-app .composition .main-last .icons:nth-child(6)::before, .project-page.mellow-app .composition .main-last .icons:nth-child(8)::before {
					display: none;
				}
				
				.project-page.mellow-app section#icon {
					min-height: 1183px;
				}
				
				.project-page.mellow-app #icon>div:nth-of-type(1) {
					height: 1183px;
					-webkit-background-size: 1380px;
					-moz-background-size: 1380px;
					-o-background-size: 1380px;
					background-size: 1380px;	
				}
				
				
				
				
				
				
				/******** PMC WEBSITE ********/
				
				
				.project-page.pmc-website section.website-mac .screen .border {
					width: 270px;
					height: 160px;
					border: 7px solid black;
					-moz-border-radius: 6px;
					-webkit-border-radius: 6px;
					border-radius: 6px;
				}
				
				.project-page.pmc-website section.website-mac .base img {
					width: 90px;
					height: 91px;
				}
				
				.project-page.pmc-website .mac-screen-home .bg {
				height: 220px;
				}
				
				.project-page.pmc-website .mac-screen-home .screen {
				margin-top: -97px;
				}
				
				.project-page.pmc-website .composition .column .content.logo img {
				width: 140px;
				}
				
				.project-page.pmc-website .composition .column .content.logo {
				height: 350px;
				}
				
				.project-page.pmc-website .composition .column .blue-box .blue-bg p {
					width: 235px;
					font-size: 18px;
					line-height: 26px;
					height: 78px;
				}
				
				.project-page.pmc-website .composition .recipe-info .right img {
					width: 100px;
				}
				
				.project-page.pmc-website .composition .recipe-info .left img {
					width: 90px;
				}
				
				
				.project-page.pmc-website .composition .nav-icons img {
					width: 256px;
					height: 92px;
				}
				
				.project-page.pmc-website .composition .column .nav-icons {
					height: 355px;
				}
				
				.project-page.pmc-website .composition .column.main-left .content {
					border-right: none;
				}
				
				.project-page.pmc-website .composition .column .logotype {
					border-top: 1px solid #E1E1E1;
				}
				
				.project-page.pmc-website .mac-screen-project.scroll .screen, .project-page.pmc-website .mac-screen-project.scroll .base {
					transform: translateY(-100px);
				}
				
				.project-page.pmc-website .mac-screen-project .screen .border img {
					margin-top: 7px;
					width: 24px;
					height: 15px;
				}
				
				.project-page.pmc-website .mac-screen-project {
					margin-top: 200px;
				}
				
				.project-page.pmc-website .mac-screen-project .bg {
					height: 320px;
					margin-top: -280px;
				}
				
				.project-page.pmc-website section.transition {
					display: none;
				}
				
				.project-page.pmc-website section.work-pmc .work-plotalot span {
					width: 80px;
					height: 80px;
					right: 50px;
				}
				
				.project-page.pmc-website section.work-pmc .work-grass img {
					-webkit-background-size: auto 100%;
					-moz-background-size: auto 100%;
					-o-background-size: auto 100%;
					background-size: auto 100%;
				}
			
			
			
			
			
	
	/*** PMC IDENTITY ***/
	
	
	.project-page.pmc-identity section#font .left, .project-page.pmc-identity section#font .right {
		margin-top: 0;
	}
	
	
	.project-page.pmc-identity section.logo .content img {
		width: 200px;
	}
	
	.project-page.pmc-identity section.creation {
		height: 430px;
	}
	
	.project-page section#logo-versions .content .left {
		border-bottom: 1px solid #EEE;
	}
	
	.project-page.pmc-identity section.logo .content img {
		width: 150px;
	}
	
	.project-page section#logo-versions .content .right img {
		max-width: 80px;
	}
	
	.project-page section#logo-versions .content .left img {
		max-width: 230px;
	}
	
	.project-page.pmc-identity .logo-versions .left, .project-page.pmc-identity .logo-versions .right, .project-page.pmc-identity section.logo.logotype {
		height: 300px;
	}
	
	.project-page.pmc-identity .related-project .image img {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	
	
	/******** CODE ROOF *********/
	
	
	
	.project-page.coderoof section#logo-versions .content .right img {
		max-width: 121px;
	}
	
	.project-page.coderoof section.main-logo .content img {
		max-width: 157px;
	}
	
	/*.project-page.coderoof section.logo .content img {
		width: 260px;
	}*/
	
	.project-page.coderoof section.logotype .content img {
		width: 257px!important;
	}
	
	
	
	
	
	/******** IX APP MOBILE *********/
	
	
	.project-page.ix-app .app-icon {
		height: 250px;
	}
	
	.project-page.ix-app .app-icon img {
		width: 130px;
	}
	
	
	.project-page.ix-app section.ios-screens .device-tile .device-body img, .project-page.ix-app section.android .device-tile .device-body img, .project-page.ix-app section.windows .device-tile .device-body img {
		width: 233px;
	}
	
	
	.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: -281px;
	}
	
	.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: -251px;
	}
	
	.project-page.ix-app .ios .ios-main.content-1, .project-page.ix-app .ios .ios-main.content-2 {
		-webkit-background-size: 590px;
		-moz-background-size: 590px;
		-o-background-size: 590px;
		background-size: 590px;
	}
	
	.project-page.ix-app .ios .ios-main {
		height: 337px;
	}
	
	.project-page.ix-app .ios-screens .ios-main.content-3 {
		-webkit-background-size: 268px;
		-moz-background-size: 268px;
		-o-background-size: 268px;
		background-size: 268px;
		height: 30px;
		z-index: 1000;
	}
	
	.project-page.ix-app section.ios-screens .grid-two.tile_one {
		border-bottom: none;
	}
	
/*	.project-page.ix-app section.ios-screens .tile_eight {
		border-bottom: 1px solid #E1E1E1;
	}*/
	
	.project-page.ix-app section.ios-screens .tile_nine, .project-page.ix-app section.android .tile_two, .project-page.ix-app section.android .tile_nine, .project-page.ix-app section.windows .tile_one, .project-page.ix-app section.windows .tile_one img, .project-page.ix-app section.windows .tile_nine {
		display: none;
	}
	
	
	
	
	
	
	
	/**** MISCELLANEOUS MAIN PAGE ****/
	
	
	.project-page.miscellaneous section.intro .content, .project-page.miscellaneous section.intro .intro-wrap {
		height: unset;
		opacity: 1!important;
	}
	
	.project-page.miscellaneous section.work.intro .project, .project-page.miscellaneous section.work.intro .project.one, .project-page.miscellaneous section.work.intro .project.three {
		margin: 0 auto;
		border-bottom: none;
	}
	
	.project-page.miscellaneous section.intro .content .textbox h2 {
		margin-bottom: 30px;
	}
	
	.project-page.miscellaneous section.intro .content .textbox {
		padding-top: 190px;
		padding-bottom: 80px;
	}
	
	
	
	
	
}




















/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .project-page section.intro {
    min-height: 500px;
  }
	
	.project-page.mellow-website .composition .column {
		float: none;
		width: 100%;
	}
	
	.project-page.mellow-website .composition .column .desc-text .text {
		width: 377px;
		font-size: 14px;
		line-height: 26px;
	}
	
	.project-page.mellow-website .composition .column.main-left .content:last-child {
		border-bottom: 1px solid #E1E1E1;
	}	
	
	.project-page.mellow-website .composition .column .title-text .text {
		font-size: 35px;
	}
	
	.project-page.mellow-website .composition .column .nav-cart .desktop {
		display: block;
	}
	
	.project-page.mellow-website .composition .column .nav-cart .mobile {
		display: none;
	}
	
	
/*	.project-page.mellow-website .pages .page-two {
		transform: translateX(-190px);
	}
	
	.project-page.mellow-website .pages .page-three {
		transform: translateX(110px);
	}
	
	.project-page.mellow-website .pages .element-one {
		transform: translateX(-190px);
	}
	
	.project-page.mellow-website .pages .page-six {
		transform: translateX(-70px);
	}*/
	
	
	
	
	
	
	
	
	/*.project-page.mellow-website .pages .page-one {
		width: 345px;
	}
	
	.project-page.mellow-website .pages .page-two {
		transform: translateX(-102px);
	}
	
	.project-page.mellow-website .pages .page-three {
		transform: translateX(136px);
	}
	
	.project-page.mellow-website .pages .page-four {
		transform: translateX(7px);
	}
	
	.project-page.mellow-website .pages .element-one {
		transform: translateX(100px);
		margin-top: 200px;
	}
	
	.project-page.mellow-website .pages .page-five {
		right: 0;
		left: 0;
		margin-top: 15px;
	}
	
	.project-page.mellow-website .pages .page-seven {
		transform: translateX(-95px);
	}
	
	.project-page.mellow-website .pages .element-three {
		top: 1570px;
	}
	
	.project-page.mellow-website .pages .element-two {
		top: 1485px;
	}
	
	.project-page.mellow-website .pages .page-eight {
		margin-top: 45px;
	}*/
	
	
	
	
  
}





/* #SMALL Mobile
================================================== */
/* Note: Design for a width of 480px */


@media only screen and (max-width: 350px) {
	
	.project-page section.intro .content .textbox {
		font-size: 8px;
		letter-spacing: 2px;
	}
	
	.project-page.mellow-website .composition .column .nav-cart .desktop {
		display: none;
	}
	
	.project-page.mellow-website .composition .column .nav-cart .mobile {
		display: block;
	}
	
	/*.project-page.mellow-website .pages .page-five {
		width: 400px;
		transform: translateX(110px);
	}*/
	
}





/********** MELLOW WEBSITE PAGES ***********/

@media only screen and (min-width: 375px) and (max-width: 413px) {
	.project-page.mellow-website .pages .page-five {
		right: 0;
		left: 0;
	}
	
	.project-page.mellow-website .pages .page-seven {
		margin-top: 330px;
	}
	
	.project-page.mellow-website .pages .element-two {
		top: 1450px;
		right: 25px;
	}
	
	.project-page.mellow-website .pages .element-three {
		top: 1520px;
		right: 17px;
	}
	
}


@media only screen and (min-width: 414px) and (max-width: 474px) {
	
	.project-page.mellow-website .pages .element-one {
		right: 0;
		left: 0;
		transform: translateX(-100px);
	}
	
	.project-page.mellow-website .pages .page-six {
		right: 0;
		left: 0;
		transform: translateX(82px);
	}
	
	.project-page.mellow-website .pages .page-five {
		width: 400px;
		right: 0;
		left: 0;
		transform: translateX(0px);
	}
	
	.project-page.mellow-website .pages .page-seven {
		right: 0;
		left: 0;
		transform: translateX(-190px);
	}
	
	.project-page.mellow-website .pages .element-two, .project-page.mellow-website .pages .element-three {
		right: 0;
		left: 0;
		transform: translateX(185px);
	}

	
}


@media only screen and (min-width: 475px) and (max-width: 767px) {
	
	.project-page.mellow-website .pages .element-one {
		right: 0;
		left: 0;
		transform: translateX(-100px);
	}
	
	.project-page.mellow-website .pages .page-two {
		transform: translateX(-87px);
	}
	
	.project-page.mellow-website .pages .page-three {
		transform: translateX(146px);
	}
	
	.project-page.mellow-website .pages .page-six {
		right: 0;
		left: 0;
		transform: translateX(82px);
	}
	
	.project-page.mellow-website .pages .page-five {
		width: 400px;
		right: 0;
		left: 0;
		transform: translateX(0px);
	}
	
	.project-page.mellow-website .pages .page-seven {
		right: 0;
		left: 0;
		transform: translateX(-190px);
	}
	
	.project-page.mellow-website .pages .element-two {
		width: 116px;
		right: 0;
		left: 0;
		transform: translateX(182px);
	}
	
	.project-page.mellow-website .pages .element-three {
		right: 0;
		left: 0;
		transform: translateX(185px);
	}
	
	
}

@media only screen and (min-width: 535px) and (max-width: 767px) { 
	
	.project-page.mellow-website .pages .page-four {
		transform: translateX(0px);
	}
	
}









/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait */
@media only screen and (min-width: 320px) and (max-width: 568px) {
	
	
}


/* Landscape */
@media only screen and (min-width: 568px) and (max-width: 667px) {
	
	
}



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

@media only screen 
  and (min-width: 375px) 
  and (max-width: 667px) 
  and (orientation: portrait)  { 

	/*.project-page.mellow-website .pages .page-six {
		transform: translateX(85px);
	}
	
	.project-page.mellow-website .pages .element-one {
		transform: translateX(-20px);
	}
	
	.project-page.mellow-website .pages .page-six {
		transform: translateX(55px);
	}
	
	.project-page.mellow-website .pages .page-seven {
		transform: translateX(-223px);
		margin-top: 340px;
	}
	
	.project-page.mellow-website .pages .element-two {
		top: 1460px;
	}
	
	.project-page.mellow-website .pages .element-three {
		top: 1540px;
	}
	
	.project-page.mellow-website .pages .page-five {
		transform: translateX(0px);
		right: 0;
		left: 0;
	}*/

}

/* Portrait */
@media only screen 
  and (min-width: 375px) and (max-width: 667px) and (orientation: portrait) { 

}







/* IPHONE XS MAX LANDSCAPE */

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation : landscape)  { 

	/*.project-page section.intro .content .textbox {
		background: red;
	}*/

	.project-page header .center a, header .center .logowhite {
		top: -20px;
	}
	
	.project-page header .circle {
		top: 31px;
	}
	
	.project-page header .logo:hover ~ .circle {
		top: -31px;
	}
	
	.home header .left, .project-page header .left {
		margin-top: 35px!important;
	}
	
	.home .button_container, .project-page .button_container {
		top: 32px!important;
	}
	
	@-webkit-keyframes logofade {
	    0%   {opacity:0; top:-40px;}
	    100% {opacity:1; top:-20px;}
	}
	
	/* Standard syntax */
	@keyframes logofade {
	    0%   {opacity:0; top:-40px;}
	    100% {opacity:1; top:-20px;}
	}
	
	.project-page section.intro {
		height: unset;
	}
	
	.project-page section.intro .content .textbox {
		position: relative;
		margin-bottom: 130px;
	}
	
	.project-page section.introscroll .content .textbox {
		opacity: 1;
	}
	
	.project-page.mellow-identity section.logo .content img {
		max-width: 130px;
	}
	
	.project-page.mellow-identity .id-sketches {
		min-height: 650px;
	}
	
	.project-page section.logo {
		height: 500px;
	}
	
	.project-page.mellow-identity section.logo.logotype {
		height: 300px;
	}
	
	.project-page.mellow-identity section.logo.logotype .content img {
		max-width: 220px;
	}
	
	.project-page.mellow-identity .logo-versions .left, .project-page.mellow-identity .logo-versions .right {
		padding-top: 150px;
		padding-bottom: 150px;
	}


}






/* DESKTOP ONLY */

@media only screen and (min-width : 960px) {
	
}


/* MOBILE ONLY */

@media only screen and (max-device-width: 767px) {

}


/* MOBILE LANDSCAPE ONLY */

@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation:landscape) {
	
}


/* TABLETS (LANDSCAPE & PORTRAIT) ONLY */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}


/* TABLETS (LANDSCAPE) ONLY */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation:landscape) {
  /*.project-page.one section.flowing-mobile {
    display: block;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
  }*/
  
  /*section#flowing {
    display: none;
  }*/

  
  /*body.two #icon>div:nth-of-type(1) {
      -webkit-background-size: 150%;
        -moz-background-size: 150%;
        -o-background-size: 150%;
        background-size: 150%;
        background-attachment: inherit;
    }*/
  
}


/* TABLETS (PORTRAIT) ONLY */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /*body.two #icon>div:nth-of-type(1) {
      -webkit-background-size: 150%;
        -moz-background-size: 150%;
        -o-background-size: 150%;
        background-size: 150%;
        background-attachment: inherit;
    }
    
  body.one #flowing>div:nth-of-type(1) {
    -webkit-background-size: 150%;
      -moz-background-size: 150%;
      -o-background-size: 150%;
      background-size: 150%;
  }*/
}