@font-face {
font-family: BAUHS;
src: url(../fonts/BAUHS93.ttf);
}

h4 {
    font-size: 20px;
}

.menu-btn {
	top: 15px;
}

#intro h1 {
  font-family: BAUHS;
  font-size: 10vw;
  font-weight: 400;
  color: #fff;
  text-align: center;
  text-transform: capitalize;
}

#intro p {
	font-size: 2vw;
	font-weight: 400;
	color: #fff;
	text-align: center;
}

.logo img{
	height:72px;
}

.tm {
font-family: 'Open Sans', sans-serif;
font-size: 9vw;
top: -1.2em;
}

.tagline {
font-family: 'Open Sans', sans-serif;
font-size: 2vw;
position: relative;
top: -60px;
font-style: italic;
}

.section-header {
    margin: 70px 0 0 0 !important;
}

.text-intro p.contact-info-text{
	    color: #040404;
}

#work {
	padding: 0;
}

p.service-type-title {
	color: #fff;
}
p.service-type-text {
	color: #fff;
}

.content-item h4 {
	color: #000;
	font-size: 18px;
	font-weight: 700;
}

.lens-profile-timeline p {
	left: -45px;
    top: -90px;
    position: absolute;
    width: 100px;
	color: #fff;
}

.lens-profile-timeline time {
	margin-top: 85px;
}

.work-grid li {
	    width: calc(100% / 5);
}


li.filter:hover {
	background: #eeeeee !important;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
	background-color: transparent;
}

.nav>li>a:hover, .nav>li>a:focus {
	background-color: transparent;
}

.work-grid p.news-title {
	    font-size: 22px;
}

#work-container {
	margin-top: 0;
}

.nav-pills>li>a {
	font-weight: 700;
}

.modal-body .quform-submit button {
	 height: auto !important; 
}

.news {
	background: none;
	height: 100px;
}
 
 .project-description li {
    font-size: 18px;
    margin-bottom: 60px;
	}

.about-info ul {
color:#fff;
}

#about{
	background: url(../images/about-bg.jpg) 50% 0 repeat;
    background-size: cover;
    position: relative;
    z-index: 10;
}

.about-info p {
    margin-bottom: 10px;
}

.row-header {}

@media only screen and (max-width: 600px) {
	header p{
		font-size:10px;
	}

}

@media only screen and (max-width: 768px) {
	.content-item {
		height: 294px !important;
		width: 100% !important;
	}

	.content-item .overlay-content h5 {
		font-size: 5vw !important;
	}

	.content-item .overlay-content p {
		font-size: 3vw !important;
	}

	header p{
		margin-top: 12px;
	}
}

@media only screen and (max-width: 992px) {
	.work-grid li {
		width: calc(100% / 2);
	}
	.row-header{
		margin-right: 0 !important;
	}
	.tagline {
		top: -20px;
	}
}

@media only screen and (min-width: 768px) {
	header p{
		margin-top: 22px;
	}
}

.img-benchmark {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.overlayz {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ff9172d6;
}

.gallery_product:hover .overlayz {
  opacity: 1;
}

.text {
  color: white;
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.content-item {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 145px;
  overflow: hidden;
  position: relative;
  width: 207px;
  margin-bottom: 40px;
}
.content-item .overlay {
  border-bottom: 100px solid #ff9172;
  border-left: 100px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;
}
.content-item:hover .overlay {
  border-bottom: 800px solid #ff9172;
  border-left: 800px solid transparent;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .corner-overlay-content {
  bottom: 15px;
  color: #fff;
  position: absolute;
  right: 15px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  text-align: center;
}
.content-item:hover .corner-overlay-content {
  opacity: 0;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .overlay-content {
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.content-item .overlay-content h5 {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}
.content-item .overlay-content p {
  color: #fff;
  text-align: center;
  font-size: 13px;
}
.content-item .overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}
.content-item:hover .overlay-content {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.box-style {
	margin-top: -130px;
	background: #f0f0f0;
	padding: 25px 5px 0px 15px;
}

.service-type1 {
	background: rgba(255, 255, 255, 0.5) url(../images/completed-projects-1.jpg) no-repeat 0 50%;
	background-size: cover;
}
.service-type2 {
	background: url('../images/completed-projects-2.jpg') center no-repeat;
	background-size: cover;
}
.service-type3 {
	background: url('../images/completed-projects-3.jpg') center no-repeat;
	background-size: cover;
}
.service-type4 {
	background: url('../images/completed-projects-4.jpg') center no-repeat;
	background-size: cover;
}

/***********************
		side menu
************************/
.pushy {
	/*width: 258px;*/
}

/***********************
		social icons
************************/

/* footer social icons */
ul.social-network {
	list-style: none;
	display: inline;
	margin-left:0 !important;
	padding: 0;
	/*float: right;*/
}
ul.social-network li {
	display: inline;
	margin: 0 5px;
}


/* footer social icons */
.social-network a.icoRss:hover {
	background-color: #F56505;
}
.social-network a.icoFacebook:hover {
	background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
	background-color:#33ccff;
}
.social-network a.icoYouTube:hover {
	background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
	background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
	background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
	color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
	color:#44BCDD;
}

.social-circle li a {
	display:inline-block;
	position:relative;
	margin:0 auto 0 auto;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	text-align:center;
	width: 25px;
	height: 25px;
	font-size:16px;
}
.social-circle li i {
	margin:2px;
	line-height:20px;
	text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-ms--transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.social-circle i {
	color: #fff;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	-ms-transition: all 0.8s;
	transition: all 0.8s;
}

.social-network.social-circle a {
 background-color: #D3D3D3;   
}


/***********************\

	Project Pages

\***********************/

#project-intro.civil {
	background: url(../images/businesses/civil/Civil-Engineer.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.alarm {
	background: url(../images/businesses/civil/PullStation.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.automation {
	background: url(../images/businesses/civil/automation.jpg) 50% 0 no-repeat fixed;
}

#project-intro.hvac {
	background: url(../images/businesses/civil/hvac.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.electricals {
	background: url(../images/businesses/civil/technician.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.iot {
	background: url(../images/businesses/civil/IOT.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.light {
	background: url(../images/businesses/civil/control4-pic.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.mobile {
	background: url(../images/businesses/wiztech-proposal/Wiztech_proposal-01.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.software {
	background: url(../images/businesses/software/software-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.web {
	background: url(../images/businesses/web/web-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.cloud {
	background: url(../images/businesses/cloud/cloud-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.erp {
	background: url(../images/businesses/erp/erp-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.digital {
	background: url(../images/businesses/digital-promotion/digital-promotion-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.branding {
	background: url(../images/businesses/ /branding-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.sms {
	background: url(../images/businesses/bulk-sms/bulk-sms-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.cyber {
	background: url(../images/businesses/cyber-security/cyber-security-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.smartclass {
	background: url(../images/businesses/smart-class/smart-class-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.cctv {
	background: url(../images/businesses/cctv/cctv-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.card {
	background: url(../images/businesses/smart-card/smart-card-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.wall {
	background: url(../images/businesses/video-wall/1.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.conference {
	background: url(../images/businesses/video-conference/video-conference-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.av {
	background: url(../images/businesses/video-conference/video-conference-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.3d {
	background: url(../images/businesses/3d-animation/3d-animation-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.shoot {
	background: url(../images/businesses/live-shoot/live-shoot-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.film {
	background: url(../images/businesses/film-making/film-making-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.documentaries {
	background: url(../images/businesses/documentaries/documentaries-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}

#project-intro.video {
	background: url(../images/businesses/video-making/video-making-project-intro.jpg) 50% 0 no-repeat fixed;
	background-size: cover;
}


/*------------------------------
	projects
------------------------------*/


.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 12px 24px;
    margin: 0;
    transition: background 0.3s;

}
.filter-button:hover
{
    text-align: center;
    color: #ffffff;
    background-color: #ff9172;

}
.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}


/*-------------------------------
	popup
-------------------------------*/

.ptn {
  padding: 14px 20px;
  display: table;
  background-color: white;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
  transition: 0.6s all;
  cursor: pointer;
}

.ptn:hover {
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4);
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  transition: 1s all;
}

.mfp-bg {}

.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}


/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}


/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.4s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/*-------------------------------
	New Services
-------------------------------*/

/*-------- flex container --------*/
.flex-container {
	display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	justify-content: space-around;
	list-style: none;
	padding: 0;
	-webkit-flex-flow: row wrap;
	position: relative;
	margin-bottom: 10rem;
}
.flex-item {
	color: #fff;
	height: 250px;
	margin: 10px 0;
	padding: 0;
	width: 225px;
	position: relative;
}
.flex-item-inner {
	display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 250px;
	margin: 0;
	padding: 0;
	width: 100%;
}
.flex-container a {
	color: white;
	display: block;
	height: 100%;
	position: relative;
}
.flex-container .flex-item:focus a::after,
.flex-container .flex-item:hover a::after {
	opacity: 1;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.flex-container .flex-item .tile-primary-content,
.flex-container .flex-item .tile-secondary-content {
	bottom: 0;
	left: 0;
	overflow: hidden;
	padding: 20px;
	position: absolute;
	right: 0;
	top: 0;
}
.flex-container .flex-item .tile-primary-content {
	display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-direction: column;
}
.flex-container .flex-item .tile-primary-content i.tile-icon {
	display: block;
	margin: 10px auto 20px auto;
    text-align: center;
}
.flex-container .flex-item .tile-primary-content h4 {
	color: #fff;
	background: #0009;
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	margin: 10px 0;
}
.flex-container .flex-item .tile-primary-content p.detail {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 10px 0;
}
.flex-container .flex-item .tile-primary-content p.link {
	align-self: flex-end;
	-webkit-align-self: flex-end;
	margin: auto 0 0 0;
}
.flex-container .flex-item:focus .tile-primary-content h4,
.flex-container .flex-item:hover .tile-primary-content h4,
.flex-container .flex-item:focus .tile-primary-content p.detail,
.flex-container .flex-item:hover .tile-primary-content p.detail,
.flex-container .flex-item:focus .tile-primary-content p.link,
.flex-container .flex-item:hover .tile-primary-content p.link {
	-moz-transform: translate3d(150%, 0, 0);
	-webkit-transform: translate3d(150%, 0, 0);
	transform: translate3d(150%, 0, 0);
	-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
}
.flex-container .flex-item .tile-primary-content h4,
.flex-container .flex-item .tile-primary-content p.detail,
.flex-container .flex-item .tile-primary-content p.link {
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition-delay: 150ms;
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
}
.flex-container .flex-item .tile-secondary-content {
	background: #ff9172;
	opacity: 0;
	-moz-transition: opacity 250ms ease-out;
	-o-transition: opacity 250ms ease-out;
	-webkit-transition: opacity 250ms ease-out;
	transition: opacity 250ms ease-out;
}
.flex-container .flex-item .tile-secondary-content p {
	color: #000;
	opacity: 1;
	-moz-transform: translate3d(-150%, 0, 0);
	-webkit-transform: translate3d(-150%, 0, 0);
	transform: translate3d(-150%, 0, 0);
	-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
}
.flex-container .flex-item:focus .tile-secondary-content p,
.flex-container .flex-item:hover .tile-secondary-content p {
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition-delay: 150ms;
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
}
.flex-container .flex-item .tile-secondary-content p {
	color: #fff;
	font-size: 13px;
}
.flex-container .flex-item .tile-secondary-content p.title {
	font-size: 16px;
	
}
.flex-container .flex-item:focus h4,
.flex-container .flex-item:focus p.detail,
.flex-container .flex-item:focus p.link,
.flex-container .flex-item:focus .tile-secondary-content,
.flex-container .flex-item:hover h4,
.flex-container .flex-item:hover p.detail,
.flex-container .flex-item:hover p.link,
.flex-container .flex-item:hover .tile-secondary-content {
	opacity: 1;
}
.flex-container .flex-item.bg-violet .tile-primary-content {
	background: url('../images/services-1.jpg') center center no-repeat;
	background-size: cover;
}
.flex-container .flex-item.bg-magenta .tile-primary-content {
	background: url('../images/services-2.jpg') center center no-repeat;
	background-size: cover;
}
.flex-container .flex-item.bg-blue .tile-primary-content {
	background: url('../images/services-3.jpg') center center no-repeat;
	background-size: cover;
}
.flex-container .flex-item.bg-green .tile-primary-content {
	background: url('../images/services-4.jpg') center center no-repeat;
	background-size: cover;
}



.item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
	top: 10em;
  
  width: 50%;
  text-align: center;
  font-size: 2em;
	color: #fff;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}