body.grid { overflow-x: hidden; background: #fff; }
.home-bg { background: url(../img/home/home-bg.jpg) left top; }

.frietruck-bg { height: 100%; overflow: hidden; }
#frietruck { position: absolute; left:0; top:0; right: 0; bottom:0; width: 100%; height: 100%; display: block; background-color: #fff; z-index: 9999; }
#frietruck a { position: absolute; left:50%; top:50%; width: 100%; height: 0; padding-bottom: 67%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#frietruck a img { position: absolute; display: block; width: 100%; height: 100%; left:0; top:0; }


section.portfolio { max-width: 1360px !important; background: #fff; }
section.portfolio > article { float: left; }
section.portfolio article.project { background: rgb(255, 255, 255); height: 400px; margin: 0; max-width: 360px; min-width: 240px; pointer-events: auto; z-index: 1000; overflow: hidden; }
section.portfolio article.project > a { display: block; height: 100%; width: 100%; text-decoration: none !important; background: #93a7be; }
section.portfolio article.project > a.menu { background:#a0b9b2; }
section.portfolio article.project > a.shopdata { background: #ccbbb7 }
section.portfolio article.project > a:hover { text-decoration: none; }
section.portfolio article.project .detail { background: url('../img/grid-over_rb.png'); bottom: -21px; right:-21px; display: block; height: 550px; width: 720px; position: absolute; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; }
section.portfolio article.project .detail span { display: none; }
section.portfolio article.project .detail i { position: absolute; bottom: 0; right: 0; color: #fff; }
section.portfolio article.project:hover .detail { right: 10px; bottom: 10px; }
section.portfolio article.project .detail_lt { background: url('../img/grid-over_lt.png'); top: -21px; left:-21px; display: block; height: 550px; width: 720px; position: absolute; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; }
section.portfolio article.project .detail_lt span { display: none; }
section.portfolio article.project .detail_lt i { position: absolute; top: 0; left: 0; color: #fff; }
section.portfolio article.project:hover .detail_lt { left: 10px; top: 10px; }

section.portfolio article.project ul { background: #FFF; height: 200px; list-style: none; margin: 0; overflow: hidden; position:relative; width: 100%; image-rendering: -moz-optimizeQuality; image-rendering: -o-optimizeQuality; image-rendering: -webkit-optimizeQuality; image-rendering: optimizeQuality;  }
section.portfolio article.project ul li { width: 100%; height: 200px; overflow: hidden; position: absolute; }
section.portfolio article.project ul li img { position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -100px; max-width: none; width: 360px; height: 200px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out;}
section.portfolio article.project a ul li { -webkit-transition: left 1.25s cubic-bezier(.5,.17,.25,1), top 1.25s cubic-bezier(.5,.17,.25,1); -moz-transition: left 1.25s cubic-bezier(.5,.17,.25,1), top 1.25s cubic-bezier(.5,.17,.25,1); -ms-transition: left 1.25s cubic-bezier(.5,.17,.25,1), top 1.25s cubic-bezier(.5,.17,.25,1); -o-transition: left 1.25s cubic-bezier(.5,.17,.25,1), top 1.25s cubic-bezier(.5,.17,.25,1); transition: left 1.25s cubic-bezier(.5,.17,.25,1), top 1.25s cubic-bezier(.5,.17,.25,1);}
section.portfolio article.project:hover a ul li img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}
section.portfolio article.project ul li.left { left: -100%; top: 0; }
section.portfolio article.project ul li.right { left: 100%; top: 0; }
section.portfolio article.project ul li.bottom { left: 0; top: 100%; }
section.portfolio article.project ul li.top { left: 0; top: -100%; }
section.portfolio article.project ul li.slideIn { left: 0; top: 0; }
article.project hgroup { position: relative; padding-top: 15px; }
article.project hgroup h1 { color: rgb(58, 52, 52); font-family: 'BrandonGrotesqueBold', 'Helvetica Neue', verdana, sans-serif; font-size: 20px; letter-spacing: 2px; padding-top: 0px; text-transform: uppercase; }
article.project hgroup h2 { color: #000; font-family: 'BrandonGrotesqueBold', 'Helvetica Neue', verdana, sans-serif; font-size: 15px; padding-top: 0px; margin:0; text-transform: uppercase; }
article.project hgroup h3 { color: #111; font-size: 11px; font-family: 'Akzidenz Grotesk BQ Regular', 'Semplicita Pro', "Helvetica Neue", helvetica, arial, verdana, sans-serif; font-weight: 200; line-height: 28px; margin: 0; position: absolute; left: 0; top: 25px; text-transform: uppercase; width: 100%; }
article.project > a:hover { text-decoration: none; }
article.project > a > div { margin: 0 25px; }
article.project > a > div p { color: #111; margin-bottom: 10px; font-size: 11px; }
article.project > a > div p.en { color: #444; font-size: 11px; line-height: 16px; }

section.portfolio article.project.highlight { float: none; min-width: 240px; max-width: 720px; position: relative; }
section.portfolio article.project.highlight > a > ul { height: 400px; }
section.portfolio article.project.highlight > a > ul li { height: 400px; position: relative; }
section.portfolio article.project.highlight > a > ul li img { width: 720px; min-height: 0; position: absolute; left: 50%; top: 0; margin-top: 0; margin-left: -360px; height: auto; }
section.portfolio article.project.highlight > a > div { background: rgba(0, 0, 0, .6); bottom: 0; height: 200px; left: 0; margin: 0; padding: 0 20px 20px; position:absolute; width: 100%;  }
section.portfolio article.project.highlight > a > div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
section.portfolio article.project.highlight > a > div > hgroup h1 { color: #fff; margin-top:0; }
section.portfolio article.project.highlight > a > div > hgroup h2 { color: #fff; }
section.portfolio article.project.highlight > a > div > hgroup h3 { color: #fff; }
section.portfolio article.project.highlight > a > div > p { color: #fff; }
section.portfolio article.project.highlight > a > div > p.en { color: #dcdcdc; }
section.portfolio article.project.highlight { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;}
section.portfolio article.project.highlight:hover {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}

section.portfolio article.project.highlight.mini { height: 200px; }
section.portfolio article.project.highlight.mini > a { background:#ccc url('../img/home/blog.png') right center no-repeat; background-size: auto 100%; -o-transition: background-size 1s; -ms-transition: background-size 1s; -moz-transition: background-size 1s; -webkit-transition: background-size 1s; transition: background-size 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}
section.portfolio article.project.highlight.mini > a:hover { background-size: auto 120%; }

section.portfolio article.project.highlight.mini > a > div { background: rgba(0, 0, 0, .1); bottom: 0; height: 200px; left: 0; margin: 0; padding: 0 25px 20px; position:absolute; width: 100%;  }
section.portfolio article.project.highlight.mini > a > div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
section.portfolio article.project.highlight.mini > a > div > hgroup h1 { color: #111; padding:0; margin-top:0;}
section.portfolio article.project.highlight.mini > a > div > hgroup h2 { color: #111; }
section.portfolio article.project.highlight.mini  > a > div > hgroup h3 { color: #111; }
section.portfolio article.project.highlight.mini  > a > div > p { color: #222; width:50%; }
section.portfolio article.project.highlight.mini  > a > div > p.en { color: #444; }

section.portfolio article.project.highlight.mini > .newsarea { background: #ccc8b7; bottom: 0; height: 200px; left: 0; margin: 0; padding: 0 25px 20px; position:absolute; width: 100%;  }
section.portfolio article.project.highlight.mini > .newsarea hgroup { padding-top: 25px; }
section.portfolio article.project.highlight.mini > .newsarea p { margin:0 0 5px; line-height: 18px;  }
section.portfolio article.project.highlight.mini > .newsarea p time { padding:0 15px 0 0; font-weight: bold;}
section.portfolio article.project.highlight.mini > .newsarea p a { margin:0 0 5px; line-height: 18px; color:#000; }
section.portfolio article.project.highlight.mini > .newsarea a.campaign { position: absolute; right:70px; bottom:30px; display: none; }
section.portfolio article.project.highlight.mini > .newsarea a.campaign img { width: 130px; opacity: 1; -webkit-transition-property: opacity,-webkit-transform; -moz-transition-property: opacity,-moz-transform; -o-transition-property: opacity,-o-transform; transition-property: opacity,transform; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; }
section.portfolio article.project.highlight.mini > .newsarea a.campaign img:hover { opacity: .5; }

section.portfolio article.blog { background: url('../img/blog.png') center center; background-size: 100% auto; height: 200px; margin: 0; max-width: 360px; min-width: 240px; overflow: hidden; pointer-events: auto; z-index: 1000;}
section.portfolio article.blog2 { background: url('../img/blog4.png') center center; background-size: 100% auto ; }

.project hgroup .icon { background: url('../img/sprite.png'); height: 7px; left: 50%; margin-left: -6px; position: absolute; top: -33px; width: 13px; }
.project hgroup .icon.icon-shopdata { background-position: 0px 0px; }
.project hgroup .icon.icon-menu { background-position: -13px 0px; }
.project hgroup .icon.icon-member { background-position: -26px 0px; }

@media (min-width: 240px) and (max-width: 319px) {
	section.portfolio article.project { float: none; width: 100%; }
	section.portfolio article.blog { float: none; width: 100%; }
	.portfolio article.highlight { width: 100%; }
	.ipad { display: none; }
	section.portfolio article.blog a footer { position: static; }
	.cp-long,.project-instagtam { display: none; }
}
@media (min-width: 320px) and (max-width: 480px) {
	section.portfolio { margin-top: 61px; }
	section.portfolio article.project { float: none; max-width: 480px; width: 100%;  }
	section.portfolio article.blog { float: none; max-width: 480px; width: 100%;  }
	.portfolio article.highlight { width: 100%; }
	section.portfolio > .highlights { width: 100%; }
	section.portfolio article.project ul li { text-align: center; }
	section.portfolio article.project ul li img { width: 100%; height:auto; min-height: 100%; position: static; margin: 0 auto; }
	section.portfolio article.blog a footer { position: static; }
	.ipad { display: none; }
	section.portfolio article.project .detail,section.portfolio article.project .detail_lt { display: none; }
	section.portfolio article.project.highlight.mini > a > div > p { width:100%; }
	section.portfolio article.project.highlight.mini > a > div { width: 100%; background: rgba(255, 255, 255, .8); }
	section.portfolio article.project.highlight.mini > .newsarea p time { display: none;}
	section.portfolio article.project.highlight.mini > .newsarea p { margin:0 0 5px; width: 90%; height: 20px; overflow: hidden; line-height: 18px; font-size: 10px; }
	.cp-long,.project-instagtam { display: none; }
	section.portfolio article.project.highlight.not-text,section.portfolio article.project.highlight.not-text > a > ul { height: 320px; }
	section.portfolio article.project.highlight.not-text > a > ul li { height: 320px; position: relative; }
	section.portfolio article.project.highlight.not-text > a > ul li img { width: 640px; min-height: 0; position: absolute; left: 50%; top: 0; margin-top: 0; margin-left: -320px; height: auto; }

}
@media (min-width: 481px) and (max-width: 719px) {
	section.portfolio { margin-top: 61px; }
	.portfolio article { width: 50%; }
	.ipad { display: none; }
	.portfolio article.highlight.mini { width: 50% !important; }
	section.portfolio article.project.highlight.mini > .newsarea p time { display: none;}
	section.portfolio article.project.highlight.mini > .newsarea p { margin:0 0 5px; width: 90%; height: 20px; overflow: hidden; line-height: 18px; font-size: 10px; }
	section.portfolio article.project.highlight.mini > a > div > p { width:100%; }
	section.portfolio article.project.highlight.mini > a > div { width: 100%; background: rgba(255, 255, 255, .8); }
	.cp-short { display: none; }
}
@media (min-width: 720px) and (max-width: 979px) {
	.portfolio article { width: 33.33%; }
	.portfolio article.highlight { width: 66.66%; }
	.ipad { display: none; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign { position: absolute; right:50px; bottom:30px; display: block; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign img { width: 120px; }
	.cp-short { display: none; }
}

@media (min-width: 980px) and (max-width: 1199px) {
	.portfolio article { width: 33.33%; }
	.portfolio article.highlight { width: 66.66%; }
	.ipad { display: none; }
	.cp-short { display: none; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign { position: absolute; right:50px; bottom:30px; display: block; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign img { width: 120px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
	.portfolio article { width: 25%; }
	.portfolio article.highlight { width: 50%; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign { position: absolute; right:70px; bottom:30px; display: block; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign img { width: 130px; }
	.cp-long { display: none; }
}
@media (min-width: 1600px) {
	.portfolio article { width: 25%; }
	.portfolio article.highlight { width: 50%; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign { position: absolute; right:70px; bottom:20px; display: block; }
	section.portfolio article.project.highlight.mini > .newsarea a.campaign img { width: 150px; }
	.cp-long { display: none; }
}