@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background-color:#000000;
}
ol, ul {
	list-style: none;
	line-height:20px;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS start from here*/
body{
	background:#cacbcc;
}
.wrapper{
	width:996px;
	height:auto;
	margin:0 auto;
	position:relative;
}
a{
	text-decoration:none;
	color:inherit;
}
a:hover,.home{
	color:#3777bc;
}
/*Landing Page*/
.landingpage{
	background:#dcddde;
	width:992px;
	height:auto;
	margin:0 auto;
	position:relative;
}
.toptext{
	background:url(images/toptext.png) no-repeat;
	margin-left:215px;
	width:672px;
	height:32px;
}
.indexlogo{
	background:url(images/logo.png) no-repeat;
	width:249px;
	height:76px;
	position:absolute;
	right:40px;
	top:550px;
}
.button{
	background:url(images/enterlink.png) no-repeat;
	width:189px;
	height:50px;
	position:absolute;
	left:550px;
	top:645px;
}
.enter{
	position:absolute;
	top:610px;
	left:500px;
	font-family:"Comic Sans MS", cursive;
	color:#231f20;
	font-size:22px;
}

/*Home Page*/
.logo{
	background:url(images/logo.png) no-repeat;
	width:196px;
	height:66px;
	position:absolute;
	top:15px;
	left:385px;
	float:left;
}
menu{
	width:276px;
	height:490px;
	background:url(images/menubg.png) no-repeat;
	float: left;
	margin:50px 0 0 365px;
	padding-top:63px;
}
menu>ul>li{
	list-style:none;
	width:90px;
	color:#646566;
	font-family: sans-serif;
    list-style: none outside none;
    padding-top: 38px;
	font-weight:bold;
	margin-left:28px;
}
/*Menu Icons*/
menu >ul >li> .home{
	background:url(images/homehover.png) no-repeat;
	width:49px;
	height:49px;
	left: 535px;
    position: absolute;
    top: 130px;
}
menu >ul >li> .home:hover{
	background:url(images/homehover.png) no-repeat;
	width:49px;
	height:49px;
	left: 535px;
    position: absolute;
    top: 130px;
	cursor:pointer;
}
menu >ul >li> .aboutus{
	background:url(images/aboutus.png) no-repeat;
	width:46px;
	height:59px;
	left: 545px;
    position: absolute;
    top: 192px;
}
menu >ul >li> .aboutus:hover{
	background:url(images/aboutushover.png) no-repeat;
	width:46px;
	height:59px;
	left: 545px;
    position: absolute;
    top: 192px;
	cursor:pointer;
}
menu >ul >li> .services{
	background:url(images/services.png) no-repeat;
	width:53px;
	height:55px;
	left: 540px;
    position: absolute;
    top: 253px;
}
menu >ul >li> .services:hover{
	background:url(images/serviceshover.png) no-repeat;
	width:53px;
	height:55px;
	left: 540px;
    position: absolute;
    top: 253px;
	cursor:pointer;
}
menu >ul >li> .brands{
	background:url(images/brands.png) no-repeat;
	width:63px;
	height:58px;
	left: 535px;
    position: absolute;
    top: 309px;
}
menu >ul >li> .brands:hover{
	background:url(images/brandshover.png) no-repeat;
	width:63px;
	height:58px;
	left: 535px;
    position: absolute;
    top: 309px;
	cursor:pointer;
}
menu >ul >li> .portfolio{
	background:url(images/portfolio.png) no-repeat;
	width:64px;
	height:47px;
	left: 538px;
    position: absolute;
    top: 376px;
}
menu >ul >li> .portfolio:hover{
	background:url(images/portfoliohover.png) no-repeat;
	width:64px;
	height:47px;
	left: 538px;
    position: absolute;
    top: 376px;
	cursor:pointer;
}
menu >ul >li> .clients{
	background:url(images/clients.png) no-repeat;
	width:41px;
	height:51px;
	left: 547px;
    position: absolute;
    top: 434px;
}
menu >ul >li> .clients:hover{
	background:url(images/clientshover.png) no-repeat;
	width:41px;
	height:51px;
	left: 547px;
    position: absolute;
    top: 434px;
	cursor:pointer;
}
menu >ul >li> .contact{
	background:url(images/contact.png) no-repeat;
	width:57px;
	height:53px;
	left: 545px;
    position: absolute;
    top: 490px;
}
menu >ul >li> .contact:hover{
	background:url(images/contacthover.png) no-repeat;
	width:57px;
	height:53px;
	left: 545px;
    position: absolute;
    top: 490px;
	cursor:pointer;
}
footer{
	background:url(images/footer.png) no-repeat;
	width:371px;
	height:34px;
	float:left;
	margin-left: 325px;
	text-align:center;
	padding-top:8px;
	color:#dbdcdd;
}
/*Internal Pages*/
/*Header Start from here*/
header{
	width:100%;
	height:165px;
}
/*its logo*/
header >.logo{ 
	background:url(images/logo.png) no-repeat;
	width:249px;
	height:76px;
	position:absolute;
	top:50px;
	left:75px;
}
/*Mainmenu Start from here*/
header > .mainmenu{
    float: left;
    height: 146px;
    margin-left:283px;
    margin-top: 5px;
    width: 702px;

}
header > .mainmenu>ul>li{
	list-style:none;
	float:left;
	font-family: sans-serif;
	margin-left:15px;
}
.line{
	background:url(images/line.png) no-repeat;
	width:4px;
	height:146px;
}
.homeicon{
	background:url(images/home.png) no-repeat;
	width:49px;
	height:49px;
	padding-top:60px;
	margin-top: 30px;
}
.homeicon:hover,.activehome{
	background:url(images/homehover.png) no-repeat;
	width:49px;
	height:49px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
.aboutusicon{
	background:url(images/aboutus.png) no-repeat;
	width:70px;
	height:59px;
	padding-top:60px;
	margin-top: 30px;
}
.aboutusicon:hover,.activeaboutus{
	background:url(images/aboutushover.png) no-repeat;
	width:70px;
	height:59px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
.servicesicon{
	background:url(images/services.png) no-repeat;
	width:53px;
	height:55px;
	padding-top:60px;
	margin-top: 30px;
}
.servicesicon:hover,.activeservices{
	background:url(images/serviceshover.png) no-repeat;
	width:53px;
	height:55px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
.brandsicon{
	background:url(images/brands.png) no-repeat;
	width:80px;
	height:58px;
	padding-top:60px;
	margin-top: 30px;
}
.brandsicon:hover,.activebrands{
	background:url(images/brandshover.png) no-repeat;
	width:80px;
	height:58px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
.portfolioicon{
	background:url(images/portfolio.png) no-repeat;
	width:64px;
	height:47px;
	padding-top:60px;
	margin-top: 30px;
}
.portfolioicon:hover,.activeportfolio{
	background:url(images/portfoliohover.png) no-repeat;
	width:64px;
	height:47px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
.clientsicon{
	background:url(images/clients.png) no-repeat;
	width:41px;
	height:51px;
	padding-top:60px;
	margin-top: 30px;
}
.clientsicon:hover,.activeclients{
	background:url(images/clientshover.png) no-repeat;
	width:41px;
	height:51px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
.contacticon{
	background:url(images/contact.png) no-repeat;
	width:80px;
	height:53px;
	padding-top:60px;
	margin-top: 30px;
}
.contacticon:hover,.activecontact{
	background:url(images/contacthover.png) no-repeat;
	width:80px;
	height:53px;
	cursor:pointer;
	padding-top:60px;
	margin-top: 30px;
	color:#3777bc;
}
/*main menu ends from here*/

/*page Ourbrands*/
.ourbrands{
	background:url(images/ourbrands.png) no-repeat;
	width:425px;
	height:435px;
	margin:5px 0 0 325px;
}
/*page Portfolio*/
.page-portfolio{
	width:735px;
	height:415px;;
	margin:40px 0 0 150px;
}
.folder{
	background:url(images/folder.png) no-repeat;
	width:125px;
	height:55px;
	color:#6d6d6e;
	font-family:Myriad Pro;
	font-size:15px;
	padding:100px 0 0 20px;
	text-align:center;
	float:left;
	margin-left:25px;
}
.folder:hover{
	background:url(images/folderhover.png) no-repeat;
	width:125px;
	height:55px;
	color:#6d6d6e;
	font-family:Myriad Pro;
	font-size:15px;
	padding:100px 0 0 20px;
	text-align:center;
	float:left;
	margin-left:25px;
	cursor:pointer;
}
/*page Services*/
.servicespage{
	background:url(images/servicesbg.png) no-repeat;
	width:360px;
	height:435px;
	margin:10px 0 0 360px;
}
/*page About Us*/
.aboutuspage{
	background:url(images/aboutusbg.png) no-repeat;
	width:646px;
	height:455px;
	margin:0 0 0 275px;
}
.aboutustext{
	width:400px;
	color:#6b6c6c;
	font-size:15px;
	font-family:Myriad Pro;
	padding: 120px 0 0 145px;
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	writing-mode: lr-tb;
}
/*page Clients*/
.localclients{
	background:url(images/localclientsbg.png) no-repeat;
	width:572px;
	height:440px;
	margin-left:190px;
}
.intclients{
	background:url(images/internationalclients.png) no-repeat;
	width:410px;
	height:420px;
	margin:-422px 0 0 545px;
}
.landing{
	background:url(images/landingpage.png) no-repeat;
	width:992px;
	height:665px;
	margin:0 auto;
}
/*page ContactUs*/
form{
	background:url(images/contactusform.png) no-repeat;
	width:329px;
	height:233px;
	margin-left:390px;
}
.email{
	position:absolute;
	top:221px;
	left:418px;
	width:272px;
}

.subject{
	position:absolute;
	top:269px;
	left:418px;
	width:272px;
}

.message{
	position:absolute;
	top:313px;
	left:418px;
	width:272px;
	height:42px;
	resize:none;
}
.submit{
	background:url(images/submit.png) no-repeat;
	position:absolute;
	top:368px;
	left:610px;
	width:86px;
	height:20px;
	cursor:pointer;
}
.addressarea{
	width:300px;
	height:auto;
	margin:15px 0 0 330px;
	float:left;
}
.addressarea > ul >li{
	list-style:none;
	margin-top:5px;
	text-align:right;
}
.address{
	background:url(images/address.png) no-repeat;
	width:35px;
	height:265px;
	float:left;
	margin:8px 0 15px 5px;
}
.fb{
	background:url(images/fb.png) no-repeat;
	width:25px;
	height:26px;
	float:left;
	margin: 165px 0 0 5px;
	padding:2px 0 0 30px;
}
.feedback{
	background:url(images/feedback.png) no-repeat;
	width:329px;
	height:233px;
	margin-left:375px;
}
/*Rotation*/
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes rollIn {
	0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}

@-moz-keyframes rollIn {
	0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}

@-o-keyframes rollIn {
	0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
	0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

.rollIn {
	-webkit-animation-name: rollIn;
	-moz-animation-name: rollIn;
	-o-animation-name: rollIn;
	animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    0% {
		opacity: 1;
		-webkit-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-webkit-transform: translateX(100%) rotate(120deg);
	}
}

@-moz-keyframes rollOut {
    0% {
		opacity: 1;
		-moz-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-moz-transform: translateX(100%) rotate(120deg);
	}
}

@-o-keyframes rollOut {
    0% {
		opacity: 1;
		-o-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-o-transform: translateX(100%) rotate(120deg);
	}
}

@keyframes rollOut {
    0% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		transform: translateX(100%) rotate(120deg);
	}
}

.rollOut {
	-webkit-animation-name: rollOut;
	-moz-animation-name: rollOut;
	-o-animation-name: rollOut;
	animation-name: rollOut;
}