@charset "utf-8";
body {
	margin: 0px;
	padding: 0px; font-family: 'Raleway', sans-serif; font-size:18px; text-decoration:none;
}

h1, h2, h3, h4, h5, h6, a, p, span, default, label, checkbox, select, ol, radio, ul, li{ margin:0px; padding:0px; outline:none;}

#main{ width:100%; float:left;}

.main-bg{ width:100%; height:925px; float:left; background:url(../images/bg.jpg) center top no-repeat; background-attachment:fixed; position:relative;}

#main-about{ width:100%; float:left;}

.wrap{ width:1140px; margin:0 auto;}

.clear{ clear:both;}

.fix-navi{ width:100%; float:left; z-index:999;}

.logo{ width:20%; float:left; z-index:999; margin:20px 0 0 0;}

.ver-navi{ width:48%; float:right; z-index:999; margin:0% 0 0 0; padding:1% 0 0 0;}
	
.header.smaller .logo {
    width: 150px;
    height: 75px;
    font-size: 30px;
	margin:15px 0 0 0;
}


.vertex-head{ width:100%; float:left; font-family: 'Lato', sans-serif; font-size:56px; text-align:center; color:#FFF; background:url(../images/vertex-head-line.jpg) bottom center no-repeat; margin:300px 0 0 0; padding:0 0 30px 0; letter-spacing:3px;}


.vertex-head-title{ width:100%; float:left; font-family: 'Lato', sans-serif; font-size:24px; text-align:center; color:#FFF; margin:100px 0 0 0;}

.scroll{ width:100%; float:left;}

.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #fff;
  position: absolute;
  bottom: 40px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e8f380;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}


.small-about{ width:100%; float:left;}

.vtext{ width:100%; float:left; font-family: 'Raleway', sans-serif; font-size:20px; color:#7e8890; text-align:center; margin:60px 0 60px 0; line-height:35px;}

.wedo{ width:100%; float:left; background-color:#655e96; font-family: 'Raleway', sans-serif; font-size:42px; color:#FFF; text-align:center; padding:50px 0 50px 0; text-transform:uppercase; font-weight:100; letter-spacing:2px}

.wedo-services{ width:100%; float:left;}

.wedo-box{ width:31%; float:left; margin:5% 1% 5% 1%;}


.wedo-icon-main{ width:100%; float:left; text-align:center;}

.wedo-icon{ width:100%; float:left; text-align:center; padding:0 0 30px 0;}

.wedo-icon-main h6{ font-family: 'Lato', sans-serif; font-size:22px; color:#333c4e; text-align:center; text-transform:uppercase; padding:0px 0 20px 0; font-weight:normal;}

.wedo-icon-main p{ font-family: 'Lato', sans-serif; font-size:18px; color:#7e8890; text-align:center;}

.learn-more{ width:30%; float:left; margin:30px 0 0 33%;}
.learn-more a{ font-family: 'Lato', sans-serif; font-size:16px; color:#655e96; text-align:center; border: solid 1px #655e96; padding:8px 10px 8px 10px; text-decoration:none;}

.learn-more a:hover{ color:#000;}



/***********************image grid************************/


.photo-grid{ width:100%; float:left; margin:3% 0 6% 0;}


.love-form{ width:100%; float:left;}

.love-head{ width:100%; float:left; font-family: 'Raleway', sans-serif; font-size:42px; color:#fff; text-align:center;}


.parallax-full{ width:100%; float:left; background:url(../images/parallax.jpg) center top repeat;}

.fullscreen,
.content-a {
    width:100%;
    height:100%;
    overflow:hidden;
	padding:0 0 0 0;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    
}

/* content centering styles */
.content-a {
    display:table;
}
.content-b {
	display:table-cell;
    position:relative;
	
	text-align:center;
}


.content-b h5 {
	 font-family: 'Raleway', sans-serif; font-size:42px; color:#fff; text-align:center; padding:120px 0 50px 0; font-weight:normal;}

.content-b p {
	 font-family: 'Raleway', sans-serif; font-size:22px; color:#fff; text-align:center;
}


.not-fullscreen {
    
}


.name-form{ width:100%; float:left; margin:7% 0 10% 0;}

.name-inp{ width:23%; font-family: 'Lato', sans-serif; font-size:14px; background-color:#FFF; margin:0 0% 0 1%; padding:10px 0 10px 1%; border:none;}

.submit-btn{ width:24%; font-family: 'Lato', sans-serif; font-size:14px; background-color:#655e96; color:#FFF; text-align:center; padding:10px 0 10px 1%; margin:0 0 0 1%; border:none; text-transform:uppercase; cursor:pointer;}

.submit-btn:hover{ background-color:#564f85;}

/***********************************  DESIGN AND CODING BY MOHD AFZAL  ************************************************/

/******************************************  FOOTER PART  ***********************************************************/

.footer-main{ width:100%; float:left; background-color:#222f38;}

.footer-link-box{ width:21%; float:left; margin:45px 2% 4% 2%;}

.footer-head{ width:100%; float:left; font-family: 'Lato', sans-serif; font-size:20px; color:#FFF; text-transform:uppercase; padding:0 0 10px 0;}

.footer-child{ width:100%; float:left; font-family: 'Raleway', sans-serif; font-size:14px; color:#929ba2; padding:8px 0 0 0; line-height:29px;}

.footer-child a{ font-family: 'Raleway', sans-serif; font-size:14px; color:#7871af; padding:8px 0 0 0;}

.footer-child a:hover{ color:#fff; text-decoration:underline;}

.footer-link{ width:100%; float:left;}
.footer-link ul{ line-height:26px; margin:0px; padding:0px;}
.footer-link ul li{ list-style:none;}
.footer-link ul li a{ font-family: 'Raleway', sans-serif; font-size:14px; color:#929ba2; padding:5px 0 5px 10px; display:block;  transition:all 1s ease; text-decoration:none;}
.footer-link ul li a:hover{ background-color:#1d2a32; transition:all 1s ease}


.copyright-main{ width:100%; float:left; background-color:#182128; font-family: 'Raleway', sans-serif; font-size:12px; color:#929ba2; padding:20px 0 20px 0;}

.copyright{ width:100%; float:left; text-align:center;}




/* ************************************ ABOUT PAGE ************************************ */


.inner-mainbg{ width:100%; height:360px; float:left; background:url(../images/aboutbg.jpg) center top no-repeat; margin:20px 0 0 0;}


.inner-main-head{ width:100%; float:left; font-family: 'Raleway', sans-serif; text-align:center; text-transform:uppercase; font-size:36px; color:#fff; padding:10% 0 20px 0; letter-spacing:2px;}

.inner-main-head span{ width:100%; float:left; font-family: 'Raleway', sans-serif; font-size:16px; color:#fff; padding:20px 0 20px 0;}


.vabout-main{ width:100%; float:left;}

.vabout-text{ width:100%; float:left; font-family: 'Raleway', sans-serif; font-size:20px; color:#7e8890; text-align:center; margin:50px 0 80px 0; line-height:35px;}

.vabout-text h4{ font-family: 'Raleway', sans-serif; font-size:32px; color:#222f38; text-align:center; margin:0 0 30px 0; font-weight:normal;}


.designers-main{ width:100%; float:left;}

.designers-text{ width:45%; float:left; text-align:right;}

.designers-text h5{ font-family: 'Lato', sans-serif; color:#333c4e; font-size:32px; padding:20px 0 15px 0; font-weight:normal;}

.designers-text p{ font-family: 'Raleway', sans-serif; color:#7e8890; font-size:20px; line-height:40px;}

.designers-image{ width:50%; float:right;}



.designers-text-right{ width:45%; float:right; text-align:left;}

.designers-text-right h5{ font-family: 'Lato', sans-serif; color:#333c4e; font-size:32px; padding:30px 0 15px 0; font-weight:normal;}

.designers-text-right p{ font-family: 'Raleway', sans-serif; color:#7e8890; font-size:20px; line-height:40px;}

.designers-image-right{ width:50%; float:left; text-align:right;}


.design-learn{ width:100%; float:right;}
.design-learn a{ font-family: 'Raleway', sans-serif; color:#655e96; font-size:20px; text-decoration:none;}
.design-learn a:hover{ color:#333c4e;}


.tools-metho{ width:30%; float:left; margin:0 1.5% 3% 1.5%;}

.tools-metho h5{ font-family: 'Lato', sans-serif; color:#333c4e; font-size:26px; text-align:center; padding:0px 0 15px 0; font-weight:normal;}

.tools-metho p{ font-family: 'Raleway', sans-serif; color:#7e8890; font-size:18px; line-height:30px; text-align:left;}



.testi-main{ width:100%; float:left; background:url(../images/parallax-about.jpg) center top no-repeat;}

.testi-text{ width:100%; float:left; font-family: 'Raleway', sans-serif; text-align:center; color:#fff; font-size:20px; line-height:40px; padding:100px 0 100px 0;}


.display-main{ width:100%; float:left; background:url(../images/dispaly.jpg) center top no-repeat;}

.dispaly-text{ width:40%; float:left;}

.dispaly-text h5{ font-family: 'Lato', sans-serif; color:#fff; font-size:32px; padding:50px 0 20px 0; font-weight:normal;}


.dispaly-text p{ font-family: 'Raleway', sans-serif; color:#fff; font-size:20px; line-height:40px; padding:0px 0 50px 0;}


/* ************************************ SERVICES PAGE ************************************ */

.websitep-main{ width:100%; float:left;}

.websitep{ width:100%; float:left;}

.web-pic{ width:23%; float:left; border: solid 2px #CCCCCC; background-color:#fff; transition: all 1s ease; margin:0 1% 2% 1%; padding:5px;}

.web-pic:hover{ border: solid 2px #655e96; transform: scale(1.3);}


.pro-design{ width:23%; float:left; border: solid 2px #CCCCCC; transition: all 1s ease; margin:0 1% 2% 1%; padding:5px;}

.pro-design:hover{ border: solid 2px #655e96; margin:-2% 1% 2% 1%;}

/* ************************************ SERVICES PAGE ************************************ */


/* ************************************ CONTACT PAGE ************************************ */

.contact-main{ width:100%; float:left;}

.contact-text{ width:50%; float:left; text-align:right;}

.contact-text h3{ font-family: 'Lato', sans-serif; font-size:32px; color:#333c4e; padding:20px 0 0 0; font-weight:normal;}

.contact-text span{ font-family: 'Lato', sans-serif; font-size:24px; color:#333c4e; padding:10px 0 0 0;}

.contact-text p{ font-family: 'Raleway', sans-serif; font-size:20px; color:#7e8890; line-height:40px;}

.contact-text p a{ color:#7e8890; line-height:40px; text-decoration:none;}
.contact-text p a:hover{ text-decoration:underline;}

.contact-form-main{ width:45%; float:right; background-color:#efeeee;}

.cnt-form{ width:100%; float:left; margin:10% 0 0 0;}

.cntname-input{ width:100%; float:left;}

.cntname-inp{ width:80%; float:left; font-family: 'Raleway', sans-serif; font-size:14px; color:#333c4e; border: solid 1px #d1d1d1; padding:10px 3% 10px 3%; margin:1% 3% 8% 10%; outline:none;}



.cntsubmit-btn{ width:80%; float:left; font-family: 'Lato', sans-serif; font-size:14px; background-color:#655e96; color:#FFF; text-align:center; padding:10px 3% 10px 3%; margin:1% 3% 13% 10%; border:none; text-transform:uppercase; cursor:pointer;}

.cntsubmit-btn:hover{ background-color:#564f85;}


.ver-map{ width:100%; float:left; margin:0px 0 0px 0;}	
	
.vertex-maps {
        position: relative;
        padding-bottom: 31%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
		border-bottom: solid 1px #efeeee;
		border-top: solid 1px #efeeee;
    }
    .vertex-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }




.brand-filter{ width:100%; float:left; margin:0 0 5% 0;}


/* *************** LOGO DESIGN *************** */

.lg-main{ width:100%; float:left;}

.ldesign-box{ width:23%; float:left; margin:0 1% 5% 1%; border: solid 1px #655e96; padding:3%1% 3% 1%;}





.row {
  margin-left:0px;
  margin-right:0px;
}



header {
  	height:100%;
	min-height:0px;
	z-index:999;
}

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}



#topNav {
	z-index:-1;
}

#nav {
  width: 100%;
}

#nav.affix-top {
   position: absolute;
   top:0;
   left:0;
   z-index:10;
   height:54px;
   background-color:transparent;
   border:0;
}

#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}

#footer > .container {
  
}

@media (min-width: 767px) {
  .navbar-nav.nav-justified > li{
      float:none;
  }
}
  
.navbar-nav {
  margin: 1px 1px; 
}  

.navbar-toggle {
	outline:0;
}

.divider {
	height:50px;
}

.panel {
	border-width:0;
}

@media (max-width: 768px) {
	header {
	
	}
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #f2f3f2;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 
 
section {
  color: #ffffff;
  min-height: 100px;
  height: auto !important;
  height: 100%;
  
}



.client-main{ width:100%; float:left; margin:3% 0 3% 0;}

.client-logo{ width:100%; float:left;}

#vertical, #horizontal {
	margin:0px auto;
	width:1140px;
}
#vertical div, #horizontal div {
	margin-right:8px;
	float:left;
	width:220px;
	height:100px;
	border:1px solid #999;
	position:relative;
	overflow:hidden;
}
#vertical img, #horizontal img {
	position:absolute;
}

/* ************************* THANK YOU *************************  */

.thnk-you{ width:80%; float:left; font-family: 'Lato', sans-serif; font-size:32px; color:#333c4e; text-align:center; padding:215px 0 215px 0; margin:0 10% 0 10%;}


.thnk-you p{ width:80%; float:left; font-family: 'Lato', sans-serif; font-size:20px; color:#333c4e; text-align:center; margin:10% 10% 0 10%;}