html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background:transparent; border:0; margin:0; padding:0; vertical-align:baseline }

/* font */
@import url("//hello.myfonts.net/count/308871");
@font-face {
	font-family:'Brandon Text';
	src:url('../font/308871_0_0.eot');
	src:url('../font/308871_0_0.eot?#iefix') format('embedded-opentype'),
		url('../font/308871_0_0.woff2') format('woff2'),
		url('../font/308871_0_0.woff') format('woff'),
		url('../font/308871_0_0.ttf') format('truetype');
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family:'Brandon Text';
	src:url('../font/308871_1_0.eot');
	src:url('../font/308871_1_0.eot?#iefix') format('embedded-opentype'),
		url('../font/308871_1_0.woff2') format('woff2'),
		url('../font/308871_1_0.woff') format('woff'),
		url('../font/308871_1_0.ttf') format('truetype');
	font-weight:300;
	font-style:normal;
}
@font-face {
	font-family:'Brandon Text';
	src:url('../font/308871_2_0.eot');
	src:url('../font/308871_2_0.eot?#iefix') format('embedded-opentype'),
		url('../font/308871_2_0.woff2') format('woff2'),
		url('../font/308871_2_0.woff') format('woff'),
		url('../font/308871_2_0.ttf') format('truetype');
	font-weight:400;
	font-style:normal;
}


html { font-size:17px }
html, body { min-height:100% }
body { font-family:'Brandon Text', sans-serif; background:#fff; color:#666; -webkit-font-variant-ligatures:no-common-ligatures; font-variant-ligatures:no-common-ligatures; }
.clearfix:after, section:after, .split-group:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.outer { position:relative; height:100%; overflow:hidden; text-align:center }
.outer:before { display:inline-block; vertical-align:middle;  content:" "; height:100% }
.inner { display:inline-block; text-align:left; vertical-align:middle; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.no-select { -moz-user-select:-moz-none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none }
.upper { position:fixed; right:25px; top:100%; width:50px; height:50px; background:transparent url('../img/upper.png') no-repeat 0 0; background-size:cover;
	border-radius:50%; cursor:pointer; -webkit-transition:all 100ms; transition:all 100ms; box-shadow:1px 2px 4px rgba(0,93,146,.3) }
.is-light .upper { background-position:-50px 0 }
[data-lazy] { position:relative}
.is-dark * { color:#fff }


/* buttons - links */
a:link, a:visited { text-decoration:underline }
a:hover, a:focus, a:active { text-decoration:none }
a:link, a:visited, a:hover, a:focus, a:active { color:#666 }
.is-dark a:link, .is-dark a:visited, .is-dark a:hover, .is-dark a:focus, .is-dark a:active { color:#fff }
a.button, .button { padding:16px 20px; border:2px solid #3ac2f8; border-radius:4px; color:#3ac2f8; margin:0 auto;
	line-height:1; text-decoration:none; display:table; cursor:pointer }
a.button:hover, .button:hover { background:#3ac2f8; color:#fff }
a.inverse, .inverse { border-color:#fff; color:#fff }
a.inverse:hover, .inverse:hover { background:#fff; color:#3ac2f8 }

	
/* font */
h1, h2, h3, h4, h5 { line-height:1em; margin:0 0 .6em }
h1, h2 { font-weight:lighter }

h1 { font-size:3rem }
h2 { font-size:2rem }
h3 { font-size:1.5rem }
h4 { font-size:1.2rem }
h5 { font-size:1.15rem }
@media (min-width:768px) {
	h1 { font-size:3.5rem }
	h2 { font-size:2.5rem }
	h3 { font-size:1.75rem }
	h4 { font-size:1.35rem }
	h5 { font-size:1.25rem }
}
@media (min-width:1400px) {
	h1 { font-size:4rem }
	h2 { font-size:3rem }
	h3 { font-size:2rem }
	h4 { font-size:1.5rem }
	h5 { font-size:1.35rem }
}
p { margin:0 0 1.6em }
p:last-child { margin-bottom:0 }

/* menu */
#main-menu { position:relative; background:#fff; height:50px; box-shadow:0 0 8px #B5B5B5; -webkit-transition:all 200ms; transition:all 200ms; overflow:hidden; z-index:9999 }
#main-menu.hidden { box-shadow:none }
#main-menu li a { line-height:50px; padding:0 20px; display:block; text-decoration:none; text-transform:lowercase; font-size:1.2em; cursor:pointer }
#main-menu a:link, #main-menu a:visited { color:#3ac2f8 }
#main-menu a:hover, #main-menu a:active, #main-menu a.active  { color:#bababa; text-decoration:none }
#main-menu li.lang a { display:inline-block; position:relative }
#main-menu li.lang a:not(:last-child):after { position:absolute; content:""; width:2px; height:20px; top:50%; right:-1px; margin-top:-10px; background:#3AC2F8 }
.studio-animacji-btn { width:148px; background:transparent url('../img/logo.svg') no-repeat center;  text-indent:-9999px; white-space:nowrap }

@media (max-width:649px) {
	.menu-switch { position:absolute; top:0; right:0; width:60px; height:50px }
	.menu-switch:hover { cursor:pointer }
	.menu-switch span { position:relative; top:50%; margin:0 auto; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%);
		-webkit-transition-duration:0s; transition-duration:0s; -webkit-transition-delay:.2s; transition-delay:.2s }
	.menu-switch span, .menu-switch span:before, .menu-switch span:after { width:30px; height:2px; background:#3ac2f8; display:block }
	.menu-switch span:before, .menu-switch span:after { position:absolute; content:"" }
	.menu-switch span:before { margin-top:-10px; -webkit-transition-property:margin, -webkit-transform; transition-property:margin, transform;
		-webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transition-delay:.2s, 0s; transition-delay:.2s, 0s }
	.menu-switch span:after { margin-top:10px; -webkit-transition-property:margin, -webkit-transform; transition-property:margin, transform;
		-webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transition-delay:.2s, 0s; transition-delay:.2s, 0s }
	body.menu-on #main-menu { height:auto }
	body.menu-on .menu-switch span { background-color:rgba(0,0,0,0); -webkit-transition-delay:.2s; transition-delay:.2s }
	body.menu-on .menu-switch span:before { margin-top:0; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition-delay:0s, .2s; transition-delay:0s, .2s }
	body.menu-on .menu-switch span:after { margin-top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition-delay:0s, .2s; transition-delay:0s, .2s }
}
@media (min-width:650px) {
	body { padding-top:80px }
	#main-menu { position:fixed; left:0; right:0; top:0; height:80px }
	#main-menu ul { cursor:default; width:100%; max-width:800px; margin:0 auto; padding:0 12px; font-size:20px; text-align:justify; -ms-text-justify:distribute-all-lines;
		text-justify:distribute-all-lines; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; box-sizing: border-box }
	#main-menu ul:after { content:""; width:100%; display:inline-block; font-size:0; line-height:0 }
	#main-menu li { display:inline-block; position:relative; z-index:1; vertical-align:top }
	#main-menu li a { line-height:80px; font-size:.95em; display:inline-block }
	#main-menu li.lang a { padding:0 12px }
	.menu-switch { display:none }
}

/* layout */
.home section:not(.grid) { position:relative; padding:10% 0 }
section#kontakt { padding-bottom:0!important }
footer { padding:5% 0; text-align:center }
.header { margin:0 0 10%; line-height:1em; font-weight:300; text-transform:uppercase; text-align:center }
.content { padding:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
#wraps { margin:0 0 5% }
.wrap { position:relative; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.longer, .description, .copyrights { padding:5% }
.longer { line-height:1.7em; font-size:1.1em }
.longer h2 { text-align:center }
.description { text-align:center }
.split-group { margin-bottom:5% }
.split-head, .split-text { text-align:center }
.collapse { height:200px; overflow:hidden; position:relative }
.collapse:before { position:absolute; content:""; bottom:0; height:90px; left:0; right:0; background:-moz-linear-gradient(top, rgba(58,194,248,0) 0%, rgba(58,194,248,1) 100%);
	background: -webkit-linear-gradient(top, rgba(58,194,248,0) 0%,rgba(58,194,248,1) 100%); background: linear-gradient(to bottom, rgba(58,194,248,0) 0%,rgba(58,194,248,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003ac2f8', endColorstr='#3ac2f8',GradientType=0 ) }
.collapse + .button { margin-top:6% }
.copyrights { margin:0; font-size:.9em; text-align:center; padding-top:0; padding-bottom:0; opacity:.6 }

@media (min-width:450px) {
	.copyrights { margin:2% 0 0; text-align:right }
	.wrap.txt + .wrap .copyrights { margin: -5% 0 0 }
	.wrap.info + .wrap .copyrights, .grid + .wrap .copyrights { text-align:center }
}
@media (min-width:569px) {
	.hyphenate { text-align:justify }
}


/* home sections */
.home .longer { padding-top:0; padding-bottom:0 }
#o-nas { background:#3AC2F8; color:#fff }
#map, #map > div { background:#b8eaff!important }
#map:before { content:""; display:block; height:0; padding-top:100% }
#map > div { left:0; top:0; right:0; bottom:0 }
#portfolio .table { background:#f5f5f5; margin-bottom:6% }

#social { position:relative; text-align:center; padding:10% 0; background:rgba(58,194,248,.1) }
#social div { position:absolute; width:100%; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) }
#social a { position:relative; display:inline-block; padding:0 1.5%; vertical-align:middle; margin-right:-4px }
#social a span { display:block; width:64px; height:64px; border-radius:50%; background:#3ac2f8 url('../img/social.svg') no-repeat 0 0; background-size:cover;
	border:0px solid #3ac2f8; -webkit-transition:all 50ms linear; -moz-transition:all 50ms linear; -ms-transition:all 50ms linear; transition:all 50ms linear }
#social a:hover span { border-width:8px; margin-top:-8px; margin-bottom:-10px; cursor:pointer }
#social a:nth-child(2) span { background-position:-64px 0 }
#social a:nth-child(3) span { background-position:-128px 0 }
#social a:nth-child(4) span { background-position:-192px 0 }
#social:before { content:""; display:block; height:64px }

@media (min-width:768px) {
	#portfolio .table { margin-bottom:32px }
	#social { padding:5% 0 }
}


/* img */
img { height:auto; display:block }
.wrap img { width:auto; max-width:100%; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.home .wrap img { padding-left:24px; padding-right:24px; margin-bottom:5% }
.portfolio-single .wrap img { margin-bottom:4px }
img[data-sizes="auto"] { width:100% }
footer img { display:inline }


@media (min-width:768px) {
	.content { padding:32px }
	.split-head, .split-text { width:50%; padding:0 20px; min-height:1px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
	.split-head { float:right; text-align:left }
	.split-text { float:left; text-align:right }
	.header { margin:0 0 .6em }
	#map:before { padding-top:75% }
	.collapse:before, .collapse + .button { display:none }
	.collapse { height:auto }
}
@media (min-width:960px) {
	.home section:not(.grid) { padding:5% 0 }
	.wrap { max-width:66.66% }
	.columns { -webkit-column-count:2; -moz-column-count:2; column-count:2;
		-webkit-column-gap:2em; -moz-column-gap:2em; column-gap:2em }
	#map:before { padding-top:50% }
}
@media (min-width:1400px) {
	.header { margin:0 0 48px }
	.wrap { max-width:50% }
	#map:before { padding-top:30% }
}


/* player */
.player { position:relative; overflow:hidden }
.player-thumbnail { display:block; visibility:visible; opacity:1; -webkit-transition:visibility 300ms, opacity 300ms; transition:visibility 300ms, opacity 300ms }
.player-text { position:absolute; left:0; right:0; top:0; padding:20px; color:#fff; font-size:1.35em; text-shadow:2px 2px 5px rgba(0,93,146,.3) }
.player-button { position:absolute; display:block; left:50%; bottom:8%; width:12%; border-radius:50%; overflow:hidden;
	background:#3ac2f8 url('../img/play.png') no-repeat 0 0; background-size:cover; box-shadow:2px 4px 8px rgba(0,93,146,.4);
	-webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);
	-webkit-transition:.4s cubic-bezier(0, 1, 0.35, 1); -moz-transition:.4s cubic-bezier(0, 1, 0.35, 1); -o-transition:.4s cubic-bezier(0, 1, 0.35, 1); transition:.4s cubic-bezier(0, 1, 0.35, 1);
	-webkit-animation:bounceball .5s ease-out 0s infinite alternate; animation:bounceball .5s ease-out 0s infinite alternate; animation-play-state:running; animation-fill-mode:none }
.player-button span { position:absolute; width:200%; left:-50%; height:50%; background:#fff; opacity:.4; -ms-transform:translate(0%,-325%) rotate(-30deg);
	-webkit-transform:translate(0%,-325%) rotate(-30deg); transform:translate(0%,-325%) rotate(-30deg) }
.player:hover .player-button span { -webkit-transition:transform .5s; transition:transform .5s; -ms-transform:translate(0%,30%) rotate(-30deg);
	-webkit-transform:translate(0%,30%) rotate(-30deg); transform:translate(0%,30%) rotate(-30deg) }
.player-button:before { content:""; display:block; height:0; padding-top:100% }
.player.is-playing .player-thumbnail { visibility:hidden; opacity:0 }
.player.is-playing .player-button { -webkit-animation:bounceball .5s ease-out 0s infinite alternate; animation:bounceball .5s ease-out 0s infinite alternate;
	-webkit-transform:translate(-50%,150%); -moz-transform:translate(-50%,150%); -o-transform:translate(-50%,150%); transform:translate(-50%,150%) }
.player.is-playing .player-text { display:none }
.player .player-button.loading { -webkit-animation:bounceball .5s ease-out 0s infinite alternate, transformer 220ms steps(2), pacman .2s steps(3) infinite alternate;
	animation:bounceball .5s ease-out 0s infinite alternate, transformer 220ms steps(2), pacman .2s steps(3) infinite alternate; -webkit-animation-delay:0s, 0s, 220ms; animation-delay:0s, 0s, 220ms }
@-webkit-keyframes transformer { from { background-position:20% } to { background-position:60% }}
@keyframes transformer { from { background-position:20% } to { background-position:60% }}
@-webkit-keyframes pacman { from { background-position:60% } to { background-position:120% }}
@keyframes pacman { from { background-position:60% } to { background-position:120% }}
@-webkit-keyframes bounceball { from { bottom:8% } 20% { bottom:8% } to { bottom:10% }}
@keyframes bounceball { from { bottom:8% } 20% { bottom:8% } to { bottom:10% }}


/* grid */
.grid, .grid-item { position:relative; overflow:hidden; padding:0 }
.grid-item:before, .player:before { content:""; display:block; height:0; padding-top:56.25% }
.grid-item img, .grid-item iframe, .player img, .player iframe { position:absolute; left:0; top:0; width:100%; height:100% }
.group .grid-item:nth-child(n+2) { display:none }

@media (min-width:569px) {
	.grid:before { content:""; display:block; height:0 }
	.grid>* { position:absolute; width:50%; overflow:hidden;
		-webkit-transition-property:left, top, width; -webkit-transition-duration:300ms; -webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-moz-transition-property:left, top, width; -moz-transition-duration:300ms; -moz-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-o-transition-property:left, top, width; -o-transition-duration:300ms; -o-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-property:left, top, width; transition-duration:300ms; transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0); 
		-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden;
		-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);
		-webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000 }
	.grid-item:not(.big):hover:after, .player:not(.is-playing):hover:after { position:absolute; content:"";
		top:0; left:0; right:0; bottom:0; border:8px solid #fff; z-index:999; cursor:pointer }
		
	.group:before { padding-top:84.37% }
	.group.set-1 .grid-item:nth-child(1) { width:100%; left:0; top:0 }
	.group.set-1 .grid-item:nth-child(2) { width:50%; left:50%; top:66.66% }
	.group.set-1 .grid-text { width:50%; left:0; top:66.66% }

	.group.set-2 .grid-item:nth-child(1) { width:50%; left:50%; top:0 }
	.group.set-2 .grid-item:nth-child(2) { width:100%; left:0; top:33.33% }
	.group.set-2 .grid-text { width:50%; left:0; top:0 }

	.group .grid-item:nth-child(2) { display:block }
	.group .grid-text:before { content:""; display:block; height:0; padding-top:56.25% }
	.group .grid-content { position:absolute; top:0; left:0; bottom:0; width:100% }
	
	
	.segment:before { padding-top:84.38% }
	.segment.set-1 .grid-item:nth-child(1) { width:100%; left:0; top:0 }
	.segment.set-1 .grid-item:nth-child(2) { width:50%; left:0; top:66.66% }
	.segment.set-1 .grid-item:nth-child(3) { width:50%; left:50%; top:66.66% }
	
	.segment.set-2 .grid-item:nth-child(1) { width:50%; left:0; top:0 }
	.segment.set-2 .grid-item:nth-child(2) { width:100%; left:0; top:33.33% }
	.segment.set-2 .grid-item:nth-child(3) { width:50%; left:50%; top:0% }
	
	.segment.set-3 .grid-item:nth-child(1) { width:50%; left:50%; top:0 }
	.segment.set-3 .grid-item:nth-child(2) { width:50%; left:0; top:0 }
	.segment.set-3 .grid-item:nth-child(3) { width:100%; left:0; top:33.33% }
}
@media (min-width:960px) {
	.group:before { padding-top:56.25% }
	.group.set-1 .grid-item:nth-child(1) { width:66.66%; left:0; top:0 }
	.group.set-1 .grid-item:nth-child(2) { width:33.33%; left:66.66%; top:0 }
	.group.set-1 .grid-item:nth-child(3) { width:33.33%; left:66.66%; top:66.66% }

	.group.set-2 .grid-item:nth-child(1) { width:33.33%; left:0; top:33.33% }
	.group.set-2 .grid-item:nth-child(2) { width:66.66%; left:33.33%; top:0 }
	.group.set-2 .grid-item:nth-child(3) { width:33.33%; left:66.66%; top:66.66% }

	.group.set-3 .grid-item:nth-child(1) { width:33.33%; left:0; top:33.33% }
	.group.set-3 .grid-item:nth-child(2) { width:33.33%; left:66.66%; top:0 }
	.group.set-3 .grid-item:nth-child(3) { width:66.66%; left:33.33%; top:33.33% }

	.group .grid-item:nth-child(3) { display:block }
	.group.set-1 .grid-text, .group.set-2 .grid-text { width:66.66%; left:0; top:66.66% }
	.group.set-1 .grid-text:before, .group.set-2 .grid-text:before { padding-top:28.13% }
	.group.set-3 .grid-text { width:33.33%; left:0; top:66.66% }
	.group.set-3 .grid-text:before { padding-top:56.25% }
	

	.segment:before { padding-top:56.2% }
	.segment.set-1 .grid-item:nth-child(1) { width:66.66%; left:33.33%; top:0 }
	.segment.set-1 .grid-item:nth-child(2) { width:33.33%; left:0; top:0 }
	.segment.set-1 .grid-item:nth-child(3) { width:33.33%; left:0; top:66.66% }
	
	.segment.set-2 .grid-item:nth-child(1) { width:33.33%; left:66.66%; top:0 }
	.segment.set-2 .grid-item:nth-child(2) { width:66.66%; left:0; top:0 }
	.segment.set-2 .grid-item:nth-child(3) { width:33.33%; left:66.66%; top:66.66% }
	
	.segment.set-3 .grid-item:nth-child(1) { width:33.33%; left:66.66%; top:0 }
	.segment.set-3 .grid-item:nth-child(2) { width:33.33%; left:0; top:0 }
	.segment.set-3 .grid-item:nth-child(3) { width:66.66%; left:0; top:33.33% }

	div:nth-of-type(even).segment.set-1 .grid-item:nth-child(1) { width:66.66%; left:0%; top:0 }
	div:nth-of-type(even).segment.set-1 .grid-item:nth-child(2) { width:33.33%; left:66.66%; top:0 }
	div:nth-of-type(even).segment.set-1 .grid-item:nth-child(3) { width:33.33%; left:66.66%; top:66.66% }

	div:nth-of-type(even).segment.set-2 .grid-item:nth-child(1) { width:33.33%; left:0; top:0 }
	div:nth-of-type(even).segment.set-2 .grid-item:nth-child(2) { width:66.66%; left:33.33%; top:0 }
	div:nth-of-type(even).segment.set-2 .grid-item:nth-child(3) { width:33.33%; left:0; top:66.66% }
	
	div:nth-of-type(even).segment.set-3 .grid-item:nth-child(1) { width:33.33%; left:0; top:0 }
	div:nth-of-type(even).segment.set-3 .grid-item:nth-child(2) { width:33.33%; left:66.66%; top:0 }
	div:nth-of-type(even).segment.set-3 .grid-item:nth-child(3) { width:66.66%; left:0; top:33.33% }
}
@media (min-width:1400px) {
	.group:before { padding-top:42.19% }
	.group.set-1 .grid-item:nth-child(1), .group.set-2 .grid-item:nth-child(1) { width:50%; left:0; top:0 }
	.group.set-1 .grid-item:nth-child(2), .group.set-2 .grid-item:nth-child(2) { width:50%; left:50%; top:0 }
	.group.set-1 .grid-item:nth-child(3), .group.set-2 .grid-item:nth-child(3) { width:25%; left:50%; top:66.66% }
	.group.set-1 .grid-item:nth-child(4), .group.set-2 .grid-item:nth-child(4) { width:25%; left:75%; top:66.66% }

	.group.set-3 .grid-item:nth-child(1) { width:25%; left:0; top:0 }
	.group.set-3 .grid-item:nth-child(2) { width:25%; left:75%; top:0 }
	.group.set-3 .grid-item:nth-child(3) { width:50%; left:25%; top:33.33% }
	.group.set-3 .grid-item:nth-child(4) { width:25%; left:75%; top:66.66% }

	.group.set-4 .grid-item:nth-child(1) { width:50%; left:0; top:0 }
	.group.set-4 .grid-item:nth-child(2) { width:25%; left:75%; top:0 }
	.group.set-4 .grid-item:nth-child(3) { width:25%; left:25%; top:66.66% }
	.group.set-4 .grid-item:nth-child(4) { width:50%; left:50%; top:33.33% }

	.group .grid-item:nth-child(4) { display:block }
	.group.set-1 .grid-text, .group.set-2 .grid-text { width:50%; left:0; top:66.66% }
	.group.set-3 .grid-text, .group.set-4 .grid-text { width:25%; left:0; top:66.66% }
	
	
	.segment:before { padding-top:28.12% }
	.segment.set-1 .grid-item:nth-child(1) { width:50%; left:50%; top:0 }
	.segment.set-1 .grid-item:nth-child(2) { width:25%; left:25%; top:0 }
	.segment.set-1 .grid-item:nth-child(3) { width:25%; left:0; top:50% }

	.segment.set-2 .grid-item:nth-child(1) { width:25%; left:75%; top:0 }
	.segment.set-2 .grid-item:nth-child(2) { width:50%; left:25%; top:0 }
	.segment.set-2 .grid-item:nth-child(3) { width:25%; left:0; top:50% }

	.segment.set-3 .grid-item:nth-child(1) { width:25%; left:75%; top:50% }
	.segment.set-3 .grid-item:nth-child(2) { width:25%; left:50%; top:0 }
	.segment.set-3 .grid-item:nth-child(3) { width:50%; left:0; top:0 }

	div:nth-of-type(even).segment.set-1 .grid-item:nth-child(1) { width:50%; left:0; top:0 }
	div:nth-of-type(even).segment.set-1 .grid-item:nth-child(2) { width:25%; left:50%; top:0 }
	div:nth-of-type(even).segment.set-1 .grid-item:nth-child(3) { width:25%; left:75%; top:50% }

	div:nth-of-type(even).segment.set-2 .grid-item:nth-child(1) { width:25%; left:0; top:50% }
	div:nth-of-type(even).segment.set-2 .grid-item:nth-child(2) { width:50%; left:25%; top:0 }
	div:nth-of-type(even).segment.set-2 .grid-item:nth-child(3) { width:25%; left:75%; top:0 }

	div:nth-of-type(even).segment.set-3 .grid-item:nth-child(1) { width:25%; left:0; top:50% }
	div:nth-of-type(even).segment.set-3 .grid-item:nth-child(2) { width:25%; left:25%; top:0 }
	div:nth-of-type(even).segment.set-3 .grid-item:nth-child(3) { width:50%; left:50%; top:0 }
}


/* table */
.table { background:#f5f5f5 }
.table:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.table-item { position:relative; width:100%; float:left; background:#e1e9ef; background-size:cover; cursor:pointer;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.table-item:before, .table-frame:before, .player-wrap:before { content:""; display:block; height:0; padding-top:56.25% }
.table-window { position:relative; background:#35B5F5; z-index:1; overflow:hidden; -webkit-transition:background 500ms; transition:background 500ms }
.table-window, .table-dummy { clear:both }
.table-frame { position:relative; background:rgba(0,0,0,.05); overflow:hidden; cursor:pointer }
.table-frame img, .table-frame iframe, .table-item img { position:absolute; left:0; top:0; width:100%; height:100% }
.table-frame:after { display:none }
.table-link { font-size:.9em }
.table-link.button { display:block; left:32px; right:32px; color:#666; border-color:#666 }

.table-link.button:before, .table-link.button:after { position:absolute; content:""; top:0 }
.table-link.button:before { z-index:-1; left:0; right:48px; bottom:0 }
.table-link.button:after { position:absolute; content:""; right:0; width:48px; height:48px; background:transparent url('../img/goto_arrow.png') no-repeat 0 0 }
.table-link.button:hover { background:transparent; color:#fff }
.table-link.button:hover:before { background:#666 }
.table-link.button:hover:after { background-position:-48px 0 }

.is-dark .table-link.button { border-color:#fff }
.is-dark .table-link.button:after { background-position:0 -48px }
.is-dark .table-link.button:hover { color:#666 }
.is-dark .table-link.button:hover:before { background:#fff }
.is-dark .table-link.button:hover:after { background-position:-48px -48px }

.table-mask, .table-mask-text { position:absolute; left:0; right:0; top:60%; bottom:0; -webkit-transition:all 200ms; transition:all 200ms }
.table-item:hover .table-mask, .table-item:hover .table-mask-text { top:50% }
.table-mask-text:before { content:""; display:inline-block; vertical-align:middle; height:100% }
.table-mask-text span { display:inline-block; vertical-align:middle; font-weight:bold; padding:0 15% }
.table-mask { background:#fff; opacity:.65 }
.table-mask-text { text-align:center }

.portfolio-single .table-frame { margin:0 auto }


/* category */
.category-wrap { position:relative; margin:0 auto; margin-bottom:10% }
.category-item { padding:0 24px; margin-bottom:6%; text-align:center; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.category-item h3 { width:100%; margin-bottom:5%; color:#00CBFF }
.category-item img { width:100px; display:block; margin:0 auto 5%; image-rendering: -webkit-optimize-contrast }
.category-item:nth-child(2) .category-icon { background-position:-150px 0 }
.category-item:nth-child(3) .category-icon { background-position:-300px 0 }
.category-item:last-child { margin-bottom:0 }

@media (max-width:568px) {
	.home .table-item:nth-child(n+7) { display:none }
	.table-item.active { height:0 }
}
@media (min-width:569px) {
	.table-item { width:50% }
	.category-wrap { width:75% }
}
@media (min-width:768px) {
	.table-mask, .table-mask-text { top:70% }
	.table-item:hover .table-mask, .table-item:hover .table-mask-text { top:60% }

	.category-item { float:left; width:33.33%; margin-bottom:0; padding:0 2.5% }
	.category-wrap { width:90%; padding-top:32px }
	.category-item h3 { margin-bottom:10% }
}
@media (min-width:960px) {
	.table-item { width:33.33% }
	.table-frame { width:66.66% }
	.table-content { position:absolute; width:33.33%; left:66.66%; top:0; bottom:0 }
	.table-link { position:absolute; bottom:32px }

	.table-mask { top:0 }
	.table-mask-text { top:50% }
	.table-mask, .table-mask-text { opacity:0 }
	.table-item:hover .table-mask { opacity:.65; top:0 }
	.table-item:hover .table-mask-text { opacity:1; top:0 }
	.table-mask-text span { font-size:1.2em }

	.category-wrap { width:80% }
	.category-item img { width:125px; margin-bottom:4% }
}
@media (min-width:1400px) {
	.table-item { width:25% }
	.table-frame { width:50%; margin:0 auto }
	.table-content { width:25%; left:75% }
	.category-wrap { width:75%; max-width:1500px; margin-bottom:100px }
	.category-item h3 { margin-bottom:32px }
	.category-item img { width:150px; margin-bottom:32px }
}


/* error */
.error { background:#555; color:#fff }
.error .outer { position:absolute; width:100%; height:100% }
.error-box { width:90%; text-align:center }
.error-box h1 { margin:.75em 0 10px }
.error-box img { max-width:620px; width:75% }
.error-btn { position:absolute; bottom:5%; left:50%; -ms-transform:translateX(-50%);
	-webkit-transform:translateX(-50%); transform:translateX(-50%) }
.error a:link, .error a:visited, .error a:hover, .error a:focus, .error a:active { color:#fff }

@media (min-width:569px) {
	.error-box img { width:60% }
}
@media (min-width:960px) {
	.error-box img { width:45% }
}
@media (min-width:1400px) {
	.error-box img { width:30% } 
}