@charset "UTF-8";
/* CSS Document */
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=f60b2b8a-7ad9-4329-b50d-f7ca2f251801");
@font-face{
font-family:"grandfont";
/*
src:url("../Fonts/be7c2ba7-0fe5-46e9-88bf-9570401c84ce.eot?#iefix");
src:url("../Fonts/be7c2ba7-0fe5-46e9-88bf-9570401c84ce.eot?#iefix") format("eot"),url("../Fonts/ca385ef9-35ea-48c9-88c5-d2ffafb320aa.woff") format("woff"),url("../Fonts/7ae1482e-59fb-47db-9637-336cf7670df0.ttf") format("truetype"),url("../Fonts/2422db8a-8430-4eda-9968-b346fa44b915.svg#2422db8a-8430-4eda-9968-b346fa44b915") format("svg");
*/
src:url("../Fonts/grandfont.otf") format("otf");
}
@font-face{
font-family:"CenturyGothic";
src:url("../Fonts/401c7dbb-5338-497b-8628-435bfe32a927.eot?#iefix");
src:url("../Fonts/401c7dbb-5338-497b-8628-435bfe32a927.eot?#iefix") format("eot"),url("../Fonts/7f1bafe5-857e-4629-ac51-700babf0f09c.woff") format("woff"),url("../Fonts/c1b1ca87-331b-4d00-81bb-3cdb20882b11.ttf") format("truetype"),url("../Fonts/ef928be0-080d-47a1-812a-4e1305a69062.svg#ef928be0-080d-47a1-812a-4e1305a69062") format("svg");
}

html, body {
	margin: 0;
	padding: 0;
	background: #000;
	line-height: 1;
	font-family: 'CenturyGothic', 'sans-serif';
	font-size:14px;
	line-height:1.2;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: none;
	font-smoothing: antialiased;
}

body{
	min-width:975px;
	min-height:600px;
}

body div{
	position:relative;
	 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#languageBtn{
	position: fixed;
	right: 0em;
	top: 36px;
	color: #000;
	z-index:90;
	width:36px;
	height:36px;
	background:url(../images/lang_en.png) no-repeat center;
	background-size:contain;
	cursor:pointer;
	opacity:0.8;
}
#languageBtn:hover{
	opacity:1;
}
#languageBtn a{
	width:100%;
	display:block;
	height:100%;
}

ul,li{
	margin:0px;
	padding:0px;
	list-style:none;
}

a:link, a:visited, a:active{
	text-decoration: none;
	color: #fff;
}
a:hover{
	text-decoration: underline;
}

#mainWrapper{
	width:100%;
	height:100%;
	min-height:100% !important;
	display:none;
	pointer-events:none;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

/* type setup */
.lv0{
	font-size:10em;
	line-height:1em;
}
.lv1{
	font-size:4em;
}
.lv2{
	font-size:3em;
}
.lv3{
	font-size:2em;
}
.lv4{
	font-size:1.5em;
}
p{
	margin:0px 0px 14px 0px;
	font-weight: lighter;
}
.center{
	text-align:center;
}

.white{
	color:#FFF;
}
.allcap{
	text-transform:uppercase;
}

.grandfont{
	font-family: grandfont;
	letter-spacing:-0.025em;	/* added by kw */
}
/* type setup end */

#logo{
	width:175px;
	height:100%;
	min-height:600px;
	position:absolute;
	top:0px;
	/*margin-top:-30px;*/
	left:0px;
	
	z-index:99;
	cursor: pointer;

	overflow: hidden;
}
#logoMenu {
	width: 350px;
	height: 100%;
	background:url(../images/logo_menu.png) no-repeat left center;
	
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	
	
	/* force hardware acceleration */
	transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	backface-visibility: hidden;
	perspective: 1000;
	-moz-backface-visibility: hidden;
	-moz-perspective: 1000;
	-ms-backface-visibility: hidden;
	-ms-perspective: 1000;
	-o-backface-visibility: hidden;
	-o-perspective: 1000;
}

#logoMenu.over{
	transform:translate3d(-175px,0,0);
	-o-transform:translate3d(-175px,0,0);
	-ms-transform:translate3d(-175px,0,0);
	-moz-transform:translate3d(-175px,0,0);
	-webkit-transform:translate3d(-175px,0,0);
}

#big-video-vid{
	opacity:0;
}

#secondMenu{
	position: absolute;
	left: 175px;
	top: 50%;
	margin-top:-228px;
	display:none;
}
#secondMenu div{
	cursor:pointer;
	opacity:0.8;
	width:604px;
	height:84px;
	margin:24px 0px;
	transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
}
#secondMenu div:hover{
	opacity:1;
}
#secondmenu0{background:url(../images/btn_about.png) no-repeat center;background-size:contain;}
#secondmenu1{background:url(../images/btn_service.png) no-repeat center;background-size:contain;}
#secondmenu2{background:url(../images/btn_portfolio.png) no-repeat center;background-size:contain;}
#secondmenu3{background:url(../images/btn_contact.png) no-repeat center;background-size:contain;}
/* menu detection area SETUP start */
#menuDedectArea{
	height:100%;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
.menuDetect{
	height:20%;
	cursor:pointer;
	background:rgba(0,0,0,0) url(../images/_blank.png);
}
.menuDetect a{
	width:100%;
	height:100%;
	display:block;
}
.menuImg{
	/*object-fit: contain;*/
	position:absolute;
	top: 0px; left: 0px;
	width:100%;
	height: auto;
	display: block;
	opacity: 0;
	pointer-events:none;
	-webkit-transform: translate3d(0, 0, 0);
	
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
.FFBG{
	min-width:100%;
	min-height:100%;
	position:absolute;
	left:0px;
	background:url(../images/showreelStill.jpg)no-repeat center;
	background-size:contain;
	pointer-events:none;
	display:none;
}
/* menu detection area SETUP end */

/* ABOUT start */
#about{
	width:100%;
	height:100%;
	position:fixed;
	left:100%;
	top:0px;
	display:none;
	min-width:975px;
	min-height:600px;
	overflow:hidden;
	background:rgba(0,0,0,1);
	/*
	background:url(../images/bg_about.jpg)no-repeat center;
	backround-size:cover;
	background:url(../images/showreelStill.jpg)no-repeat center;
	background-size:cover;*/
	/*
	transform:translate3d(100%,0,0);
	-o-transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-webkit-transform:translate3d(100%,0,0);	 20140506 use translate3d for better performance */
}
#aboutContainer{
	margin-left:175px;
	height:100%;
}
#aboutPagination{
	position: absolute;
	left:970px;
}
.aboutPageClick{
	padding:6px;
	cursor:pointer;
}
.aboutPageClick .aboutPageCircle{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#999;
}
.aboutPageClick:hover .aboutPageCircle{
	background:#FFF;
}
.aboutPageClick.active .aboutPageCircle{
	background:#FFF;
}
#aboutPageContain{
	overflow: hidden;
}
#aboutPageForScroll{
	width:100%;
	height:100%;
}
.aboutBlk{
	position:relative;
}
#aboutTitle{
	margin-top:-2em;
}
#aboutPage0{
	/*
	background: #FFF;
	width: 60%;
	padding: 0px 20%;
	height:100%;
	*/
	width:100%;
	/*height:540px;*/
	background:url(../images/about0.png)no-repeat bottom;
	background-size:contain;
}
#aboutPage0 table{
	width: 100%;
	height: 100%;
	text-align:center;
}
#aboutPage1{
	/*
	background: #FFF;
	width: 60%;
	padding: 0px 20%;
	height:100%;
	*/
	width:100%;
	/*height:540px;*/
	background:url(../images/about1.png)no-repeat bottom;
	background-size:contain;
}
#aboutPage1 table{
	width: 100%;
	height: 100%;
	text-align:center;
}
#aboutPage2{
	/*
	background: #FFF;
	width: 60%;
	padding: 0px 20%;
	height:100%;
	*/
	width:100%;
	/*height:540px;*/
	background:url(../images/about2.png)no-repeat bottom;
	background-size:contain;
}
#aboutPage2 table{
	width: 100%;
	height: 100%;
	text-align:center;
}
#aboutPage3{
	width: 100%;
}
#aboutPage3 table{
	width:100%;
	height:100%;
	text-align:center;
}

#clientListBlk { min-height:540px; }

#aboutPage3 .clientListBlk{
	padding:2%;
	border-top:1px solid rgba(255,255,255,.2);
	border-left:1px solid rgba(255,255,255,.2);
	float: left;
	background-position: center center;
	background-size: 0px 0px;
	background-repeat: no-repeat;
	
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition:background 0.5s;
	
	cursor: default;
}
#aboutPage3 .clientListBlk p{
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
}
#aboutPage3 .clientListBlk.over{
	background-size: 100% 100%;
}
#aboutPage3 .clientListBlk.over p{
	opacity: 0;
}

#aboutPage3 .rowlast{
	border-right: 1px solid rgba(255,255,255,.2);
}
#aboutPage3 .tablebottom{
	border-bottom: 1px solid rgba(255,255,255,.2);
}
/* ABOUT end */

/* SERVICE start */
#service{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 100%;
	top: 0px;
	/*display:none;*/
	min-width:975px;
	min-height:600px;
	overflow:hidden;
	background:rgba(0,0,0,1);
	/*background:url(../images/bg_service.jpg)no-repeat center;
	background-size:cover;
	background:url(../images/showreelStill.jpg)no-repeat center;*/
	
		/*
	transform:translate3d(100%,0,0);
	-o-transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-webkit-transform:translate3d(100%,0,0);	 20140506 use translate3d for better performance */
}
#serviceContainer{
	margin-left:175px;
	padding-top:50px;
}
#serviceList{
	width:100%;
	padding:7px 0px;
}
.serviceListItems{
	cursor:pointer;
	width:60%;
	min-width:580px;
	opacity:1;
	
	transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	-o-transition:opacity 0.5s;
}
.serviceListItems.idle{
	opacity:0.3;
}
.serviceDes{
	/*display:none;*/
	height: auto;
}
/* SERVICE end */

/* PORTFOLIO start */
#portfolio{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 100%;
	top: 0px;
	display:none;
	min-width:975px;
	min-height:600px;
	overflow:hidden;
	background:rgba(0,0,0,1);
	/*
	background:url(../images/showreelStill.jpg)no-repeat center;
	background-size:cover;*/
	/*
	transform:translate3d(100%,0,0);
	-o-transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-webkit-transform:translate3d(100%,0,0);	20140506 use translate3d for better performance */
}
#portfolioContainer{
	margin-left:175px;
}
#portfolioList{
	margin:0px auto;
}
#portfolioList ul{
	width:100%;
}
#portfolioList ul li{
	position:relative;
	background-size:cover;
	cursor:pointer;
}
#portfolioList ul li div{
	background:rgba(0,0,0,0.2);
	background-size:cover;
	position:absolute;
	opacity:0;
	pointer-events:none;
}
#portfolioPagination{
	position:absolute;
}
#portfolioPagination .portfoPageClick{
	padding:6px;
	cursor:pointer;
}
.portfoPageClick .portfoPageCircle{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#999;
}

.portfoPageClick:hover .portfoPageCircle{
	background:#FFF;
}
.portfoPageClick.active .portfoPageCircle{
	background:#FFF;
}
#portfolioListScroll{
	overflow:hidden;
}

#portfolioListScroll .last{
	clear:both;
	width:100%;
	display:block;
}

#youtubeplayer{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	background:#000;
	display:none;
	pointer-events:none;
}
#youtubeplayer iframe{
	width:100%;
	height: 100%;
}
#controls{
	position:fixed;
	z-index:98;
	background:rgba(255,0,0,0);
	width:100%;
	height:100%;
}
#controls.pause{
	background:rgba(255,0,0,0) url(../images/pause.png) no-repeat center;
	background-size:96px 96px;
}
/* PORTFOLIO end */

/* PORTFOLIOPLAYER start */
/*
#portfolioPlayer{
	position:fixed;
	left:100%;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(100,0,0,0.5);
}*/
#portfoClose{
	width:36px;
	height:36px;
	position:fixed;
	background:url(../images/profolioClose.png) no-repeat center;
	top:36px;
	right:0px;
	cursor:pointer;
	z-index:99;
}
/* PORTFOLIOPLAYER end */

/* CONTACT start */
#contact{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 100%;
	top: 0px;
	background:url(../images/bg_contact.jpg)no-repeat center;
	background-size:cover;
	display:none;
	min-width:975px;
	min-height:600px;
	overflow:hidden;
	
	/*
	transform:translate3d(100%,0,0);
	-o-transform:translate3d(100%,0,0);
	-ms-transform:translate3d(100%,0,0);
	-moz-transform:translate3d(100%,0,0);
	-webkit-transform:translate3d(100%,0,0);	20140506 use translate3d for better performance */
}
#contactBlk{
	min-width:625px;
	margin:0px auto;
}
#contactContainer{
	margin-left:175px;
	position: relative;
	height:312px;
}
#locationBlk{
}
#locationLink{
	width:42px;
	margin:0px auto;
	border-radius:50%;
	height:42px;
	background:url(../images/location.png)no-repeat center;
	background-color:rgba(255,255,255,0.2);
	background-size:contain;
	cursor:pointer;
	opacity:0.7;
}
#locationLink:hover{
	animation:mymove 2s infinite;
	-webkit-animation:mymove 2s infinite; 
}

@keyframes mymove
{
0%   {background-color:rgba(255,255,255,0.2);}
50%  {background-color:rgba(255,255,255,1);}
100% {background-color:rgba(255,255,255,0.2);}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {background-color:rgba(255,255,255,0.2);}
50%  {background-color:rgba(255,255,255,1);}
100% {background-color:rgba(255,255,255,0.2);}
}

/* CONTACT end */

#big-video-vid_html5_api{
	opacity:1;
}

#loader{ 
	position: absolute;
	left:0px; top:0px;
	width:100%; height:100%;
	background: #000 url(../images/loading.gif) center center no-repeat;
	z-index: 100;
}


.translate3d{
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-ms-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;
}
.translate3d.show{
	-webkit-transform: translate3d(-100%,0,0);
	-moz-transform: translate3d(-100%,0,0);
	-ms-transform: translate3d(-100%,0,0);
	-o-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}