@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body{
	overflow-x: hidden;
	font-family: 'Noto Sans TC', sans-serif;
	position: relative !important;
	
}

a{
	text-decoration: none;
}

a:hover{
	color: #666;
	text-decoration: none;
}

main{
	opacity: 0;
	animation-name: displayMain;
    animation-duration:5s;
    animation-fill-mode: forwards;
}
.wrapper{
	display:block;
	width:100vw;
	height:auto;
	overflow:hidden;
}

/*.fullvw{
	margin:0 !important;
}*/
.d-p{display:block;}
.d-m{display:none;}
@keyframes displayMain{
    0%, 90%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.navbar{
	background-color: #F6F6F6;
	position: absolute;
	top: 1em;
	right: 3vw;
}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link{ 
	/*Navigation 選中狀態*/
	/*color: #333;*/
	/*background-image: url(../images/b1.png);*/
	/*background-repeat: no-repeat;*/
	/*background-position: 50% 50%;*/
}

.navbar-nav .active1>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b1.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.navbar-nav .active2>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b2.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.navbar-nav .active3>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b3.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.navbar-nav .active4>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b4.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.navbar-nav .active5>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b5.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.navbar-nav .active6>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b6.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.navbar-nav .active1>.nav-link:hover{ 
	/*Navigation 選中時 又Hover*/
	background-size: 0% 0%;
}

.navbar-nav .active2>.nav-link:hover{ 
	/*Navigation 選中時 又Hover*/
	background-size: 0% 0%;
}

.navbar-nav .active3>.nav-link:hover{ 
	/*Navigation 選中時 又Hover*/
	background-size: 0% 0%;
}

.navbar-nav .active4>.nav-link:hover{ 
	/*Navigation 選中時 又Hover*/
	background-size: 0% 0%;
}

.navbar-nav .active5>.nav-link:hover{ 
	/*Navigation 選中時 又Hover*/
	background-size: 0% 0%;
}

.navbar-nav .active6>.nav-link:hover{ 
	/*Navigation 選中時 又Hover*/
	background-size: 0% 0%;
}

.navbar-nav .active6>.nav-link{ 
	/*Navigation 選中狀態*/
	color: #333;
	background-image: url(../../images/b6.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.n1:hover{ 
	color: #888;
	background-image: url(../../images/b1.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.n2:hover{ 
	background-image: url(../../images/b2.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.n3:hover{ 
	background-image: url(../../images/b3.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.n4:hover{ 
	background-image: url(../../images/b4.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.n5:hover{ 
	background-image: url(../../images/b5.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.n6:hover{ 
	background-image: url(../../images/b6.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.row{
	position: absolute;
	top: 0;
	left: 0;
}



.ml-auto, .mx-auto{
	/*使Navigation內的nav-item置中*/
	margin-right: -2em;
}

.nav-item{
	margin: 0 1em;
	text-transform: uppercase;
	white-space: nowrap;
}


#navigationBarBG{
      position: fixed;
      z-index: 9998;
      width: 100vw;
      height: 80px;
      top: 0;
      left: 0;
      background-color: #F6F6F6;
    }

    /*#logo{
      position: fixed;
    }
*/

.alignLeft{
	float: left;
	left: 5vw;
	top: 0;
	left: 0;
}

.titleAbout{
	width: 25em;
	height: 7em;
	position: relative;
	left: 0;
	margin: 0% 0 -5% 0%;
}

.titleProject {
    overflow: hidden;
    position: relative;
    width: 530px;
    height: 73px;
    /* left: 2vw; */
    margin: 11vh 0 -12vh 5%;
}

.titleContact{
	width: 530px;
	height: 73px;
	position: relative;
	margin: 11vh 0 0% 3%;
	overflow:hidden;
	
}
.titleServices{
	width: 50em;
	height: 7em;
	position: relative;
	left: 0;
	margin: 11vh 0 0% 2%;
}

.titleClients{
	width: 30em;
	height: 7em;
	position: relative;
	left: 0;
	top: 0;
	margin: 11vh 0 0% 4%;
}
.titleCareer{
	width: 50em;
	height: 7em;
	position: relative;
	left: 0;
	top: 0;
	margin: 11vh 0 0% 2%;
}


.titleContact iframe, .titleClients iframe,.titleProject iframe,.titleAbout iframe, .titleCareer iframe{
	width: 100%;
	height: auto;
}
.titleServices iframe{
	width: 430px;
	height: 73px;
}

.heading-title{
	position: relative;
	margin: 0 0 5% 0;
}



.split-box{
	position: relative;
	top: 8vh;
	margin: 15% 0 0% 0;
}
	
.heading-title h1{
	position: relative;
	font-size: 2em;
	padding: 0.2em 0.5em;
	background-color: #63488f;
	color: #FFF;
	white-space: nowrap;

	width:fit-content;
	width:-webkit-fit-content;
	width:-moz-fit-content;
	z-index: 99;
}

.heading-title p{
	position: relative;
	left: 5vw;
	font-size: 1em;
}

.heading-title a{
	position: relative;
	left: 5vw;
	color: #63488f;
}
.aboutrow{
	padding: 10vh 0 0% 2%;
	}
.aboutImg{
	position: relative;
	/*top: 5em;*/
	margin:0;
}
.aboutImg img{
	position: relative;
	/*top: 8vh;*/
	width: 100%;
}

.aboutCTA img{
	width: 80px;
	margin-left: 10px;
	margin-top: -5px;
}
	
.aboutCTA a:hover{
	text-decoration: none;
	position: relative;
	animation-name: aboutCTA;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}






@keyframes aboutCTA{
    from{
        padding-left: 0px;
    }
    to{
        padding-left: 10px;
    }
}



/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/


.clients {
    position: relative;
    /* top: 10vh; */
    /* left: -1vw; */
    width: 95%;
    margin: 1% auto 0%;
    /* top: 16vh; */
}

#clients .client-logo {
	position: relative;
	border: 1px #ccc solid;
	width: 15vw;
	height: 15vw;
	margin: 0.3vh;
}

#clients .client-logo:hover {
	border: 0;
	padding: 1px;
	background: linear-gradient(15deg, rgba(171,4,243,1) 0%, rgba(36,216,182,1) 100%);
}


#clients .client-logo img{
	position: relative;
}

@media (max-width: 991px) {
	#clients .client-logo {
	  width: 30vw;
	  height: 30vw;
	  margin-bottom: 1vh;
	}

	#clients .client-logo:hover {
		border: 0;
		padding: 1px;
		background: linear-gradient(15deg, rgba(171,4,243,1) 0%, rgba(36,216,182,1) 100%);
	}

}

@media (max-width: 767px) {
	#clients .client-logo {
	  width: 45vw;
	  height: 45vw;
	  margin-bottom: 2vh;
	}
}
@media (max-width: 480px) {
	.clients {
	position: relative;
	/*top: 10vh;*/
	/*left: -1vw;*/
	width: 98%;
	display:block;
	margin:3% 0 0 -3% !important;
	/*top: 16vh;*/
}
}
@media (max-width: 320px) {
	.clients {
		margin:3% 0 0 -4% !important;
	}
}

@media (max-width: 450px) {
	#clients .client-logo img {
		position: relative;
		top: -24px;
	}
}



/*# Contact*/

.googlemap {
    position: relative;
   	margin: 5% 0 0 7%;
    width: 100%;
}

.googlemap iframe{
	width: 100%;
	height: 65vh;
	/*float: left;*/
	left: 0;
}

.contactInfo {
    position: relative;
    /* float: right; */
    /* right: -5vw; */
    width: 100%;
    margin: 5% 0% 0 6%;
}

.contactInfo h4{
	font-size: 1.5em;
	right: 0;
	color: #63488f;
	font-weight: 400;
}

.contactInfo span{
	font-size: 1.1em;
	right: 0;
	color: #888;
	margin-left: 10px;
	position: relative;
	bottom: -2px;
	font-weight: 400;
}

.contactInfo ul{
	position: relative;
	left:0;
	top: 0;
	padding:0 0 0 1%;
}

.contactInfo li h4{
	position: relative;
	/*top: -2px;
	left: 0.5vw;*/
	font-size: 1.5em;
	right: 0;
	color: #00b293;
}

.contactInfo ul li{
	position: relative;
	padding: 0% 0 0 3%;
}
.contactInfo ul li:nth-child(1),.contactInfo ul li:nth-child(2),
.contactInfo ul li:nth-child(3),.contactInfo ul li:nth-child(4)
{
	background-size: 0.9em !important;
}
.contactInfo ul li:nth-child(1){
	background: url(../../images/li1.png) no-repeat top 0.3em left 0%;
	
}

.contactInfo ul li:nth-child(2){
	background: url(../../images/li2.png) no-repeat top 0.3em left 0%;
}

.contactInfo ul li:nth-child(3){
	background: url(../../images/li3.png) no-repeat top 0.3em left 0%;
}

.contactInfo ul li:nth-child(4){
	background: url(../../images/li4.png) no-repeat top 0.3em left 0%;
}

.contactInfo ul p{
	/*left: 0.5vw;*/
	font-size: 1.2em;
	color: #333;
	position: relative;
	margin-bottom: 2vh;
}
.cpName{
		padding: 0 0 3% 0;
	}
@media (min-width: 1371px) and (max-width: 1440px) {
	/*.googlemap{
		top: 30vh;
	}
	.contactInfo{
		top:0;
		right:0;
		margin: 22vh -3% 0 0%;
	}*/
}

@media (min-width: 1281px) and (max-width: 1370px) {
	/*.googlemap {
		top: 27vh;
	}*/

	.contactInfo{
		/*top:0;
		right:0;*/
		/*margin: 20vh -2% 0 0%;*/
	}

	/*.contactInfo span{
		position: relative;
	}

	.contactInfo ul{
		position: relative;
		margin-left: -7vh;
	}*/

	/*.contactInfo ul li:nth-child(1),
	.contactInfo ul li:nth-child(2),
	.contactInfo ul li:nth-child(3),
	.contactInfo ul li:nth-child(4){
		transform: scale(0.8);
	}*/

	.contactInfo ul p{
		margin-bottom: 3vh;
	}
}

@media (min-width: 1201px) and (max-width: 1280px) {
	/*.googlemap{
		top: 28vh;
	}*/

	.contactInfo{
		/*top:0;
		right:0;*/
		/*margin: 28vh -6vw 0 0;*/
	}

	/*.contactInfo span{
		position: relative;
	}

	.contactInfo ul{
		position: relative;
		left: -11vh;
	}*/

	/*.contactInfo ul li:nth-child(1),
	.contactInfo ul li:nth-child(2),
	.contactInfo ul li:nth-child(3),
	.contactInfo ul li:nth-child(4){
		transform: scale(0.8);
	}*/

	.contactInfo ul p{
		margin-bottom: 3vh;
	}
}

@media (min-width: 1101px) and (max-width: 1200px) {
	/*.googlemap {
		top: 30vh;
	}
*/
	.contactInfo{
		/*top: 22vh;
		right: -7vw;*/
		/*margin: 30vh -8vw 0 0;*/
	}

	/*.contactInfo span{
		position: relative;
	}

	.contactInfo ul{
		position: relative;
		left: -8vh;
	}
*/
	/*.contactInfo ul li:nth-child(1),
	.contactInfo ul li:nth-child(2),
	.contactInfo ul li:nth-child(3),
	.contactInfo ul li:nth-child(4){
		transform: scale(0.8);
	}
*/
	.contactInfo ul p{
		margin-bottom: 3vh;
	}
}

@media (min-width: 992px) and (max-width: 1100px) {
	/*.googlemap {
		top: 24vh;
	}*/

	.contactInfo{
		/*top: 19vh;
		right: -2vw;*/
		/*margin: 24vh -3vw 0 0;*/
	}

	/*.contactInfo span{
		position: relative;
	}

	.contactInfo ul{
		position: relative;
		left: -7vh;
	}*/

	/*.contactInfo ul li:nth-child(1),
	.contactInfo ul li:nth-child(2),
	.contactInfo ul li:nth-child(3),
	.contactInfo ul li:nth-child(4){
		transform: scale(0.8);
	}
*/
	.contactInfo ul p{
		margin-bottom: 3vh;
	}
}

@media (max-width: 991px) {
	
	/*.googlemap iframe{
		width: 90vw;
	
	.contactInfo{
		position: relative;
		margin: 95vh 0 0 0%;
		width: 100%;
		top: 0;
		left: 0;
		float: left;
		
	}}*/
}

@media (max-width: 767px) {
	/*.googlemap iframe{
		width: 100%;
	}*/
	.contactInfo{
		/*position: relative;
		margin: 95vh 0 0 0%;
		width: 100%;
		top: 0;
		left: 0;*/
		/*float: left;*/
	}
}
@media (max-width: 414px) {
	/*.contactInfo ul {
		left: -3vw;
	}*/
}


/*--------------------------------------------------------------
# Projects
--------------------------------------------------------------*/


#startAnimation{
	position: fixed;
	top: 0;
	left: 0;
	width: 1920px;
	height: 1080px;
	animation-name: startAnimation;
    animation-duration:6s;
    animation-fill-mode: forwards;
}
@keyframes startAnimation{
    0%{
        opacity: 1;
        z-index: 999;
    }
    60%{
        opacity: 1;
    }
	95%{
		z-index: 999;
	}
    100%{
    	opacity: 0;
    	display: none;
    	z-index: -9999;
    }
}

.slide{
	/*animation-name: hideSlide;*/
    animation-duration:6s;
    animation-fill-mode: forwards;
}

@keyframes hideSlide{
    0%{
        opacity: 0;
        z-index: 999;
    }
    60%{
        opacity: 0;
    }
    100%{
    	opacity: 1;
    	display: none;
    	z-index: -9999;
    }
}


@keyframes slide__projectMove{
    from{
        left: 0px;
    }
    to{
        left: 10px;
    }
}



@media (min-width: 2000px) { /*2000-2499px*/
	#startAnimation{
		transform: scale(1.25);
	}
	.titleProject{
		margin: 11vh 0 -5% 5%;
	}
}

@media (min-width: 2500px) { /*2500px up*/
	#startAnimation{
		transform: scale(1.7);
	}
}

@media (max-width: 1680px) { /*1441-1680px*/
	#startAnimation{
		position: fixed;
		left: -8vw;
		top: -5vh;
		transform: scale(0.9);
	}
}

@media (max-width: 1440px) {
	#startAnimation{
		position: fixed;
		left: -15vw;
		top: -12vh;
		transform: scale(0.8);
	}
	
}

@media (max-width: 1366px) {
	#startAnimation{
		position: fixed;
		left: -20vw;
		top: -20vh;
		transform: scale(0.72);
	}

	/*.titleProject{
		overflow: hidden;
		position: relative;
		width: 530px;
		height: 73px;
		left: 2vw;
	}

	.titleProject iframe{
		position: absolute;
		transform: scale(0.85);
	}*/

	
}

@media (max-width: 1280px) {

	#startAnimation{
		position: fixed;
		left: -22vw;
		top: -25vh;
		transform: scale(0.72);
	}

}

@media (max-width: 1200px) {

	

	

	
}

@media (max-width: 1024px) {

	
}


/*--------------------------------------------------------------
# Career
--------------------------------------------------------------*/



.joinusContent{
	position: relative;
	left: 4vw;
	top: 15vh;
}

.careerLink{
	position: relative;
	margin-top: 5vh;
}

.joinWrapper{
	width:100%;
	height:100%;
	overflow:hidden;	
}
.textBox{
	text-align:center;
	width:100%;
	display:block;
	margin: 13% auto 0%;
}



@media (min-width: 2000px) {
	.contactInfo {
		margin: 6vh 0 0 3vw;
	}
	

	.heading-title h1{
		font-size: 2.2em;
	}

	.heading-title p{
		font-size: 1.2em;
		color: #333;
	}

	.heading-title a{
		font-size: 1.2em;
	}
	.titleAbout {
		margin: 0% 0 3% 0%;
	}
}



@media (max-width: 1680px) {
	.heading-title h1 {
		font-size: 1.5em;
	}
	
}



@media (max-width: 1400px) {
	.split-box{
		position: relative;
		top: 8vh;
		margin: 15% 0 0% 0;
	}
	.titleCareer{
		overflow: hidden;
		position: relative;
		width: 430px;
		height: 73px;
		left: 0vw;
		margin: 13vh 0 0 3%;
	}
	.titleClients{
		overflow: hidden;
		position: relative;
		width: 430px;
		height: 73px;
		left: 0vw;
		margin: 13vh 0 0 4%;
	}
	 .titleContact{
		overflow: hidden;
		position: relative;
		width: 530px;
		height: 73px;
		margin: 13vh 0 0% 3%;
	}
	.titleServices{
		width: 50em;
		height: 7em;
		margin: 13vh 0 0% 2%;
	}
	.titleProject{
		overflow: hidden;
		position: relative;
		width: 530px;
		height: 73px;
		margin: 13vh 0 0 5%;
	}

	.joinusContent{
		position: relative;
		top: 20vh;
		left: 5vw;
	}

	.titleAbout{
		transform: scale(0.85);
		margin: 0% 0 -5% -5%;
		left: 0vw;
	}
	.heading-title h1 {
		font-size: 1.3em;
	}
	.heading-title p {
		font-size: 0.95em;
	}
	.heading-title a {
		font-size:  0.95em;
	}
	.clients {
		margin: 2% auto 0%;
	}
	/*.showcase {
		margin: -10% 0 0 -2.3vw;
	}*/
	.showcase .entry .album .inner {
		transform: scale(0.9);
	}

}



/*=====================*/
@media (max-width: 1200px) {
	.split-box{
		position: relative;
		/*top: 8vh;*/
		margin: 10% 0 0% 0;
	}
	.titleAbout{
		transform: scale(0.8);
		margin: 0% 0 -12% -10%;
		left: 0vw;
	}
	.titleClients{
		overflow: hidden;
		position: relative;
		width: 430px;
		height: 73px;
		left: 0vw;
		margin: 13vh 0 0 0%;
	}
	.titleCareer{
		overflow: hidden;
		position: relative;
		width: 430px;
		height: 73px;
		left: 0vw;
		margin: 13vh 0 0 0%;
	}
	.titleServices{
		transform: scale(0.85);
		left: 0vw;
		margin: 13vh 0 0 -5%;
	}
	 .titleContact{
		transform: scale(0.8);
		margin: 13vh 0 0% -5%;
		left: 0vw;
	}
	.titleProject{
		transform: scale(0.85);
		left: 0vw;
		margin: 13vh 0 0 0%;
	}

	.titleProject iframe, .titleContact iframe, .titleClients iframe, .titleCareer iframe{
		position: absolute;
		transform: scale(0.8);
	}
	.heading-title h1 {
		font-size: 1.2em;
	}
	.heading-title p {
		font-size: 0.87em;
		line-height: 1.8em;
		margin: 0 0 3% 0;

	}
	.heading-title a {
		font-size: 0.87em;
	}
	.clients {
		margin: 2% auto 0%;
	}
	/*.showcase {
		margin: -10% 0 0 -2.3vw;
	}*/
}


/*=====================*/
@media (max-width: 1024px) {
	.split-box{
		top: 0;
		margin: 0;
	}
	.titleAbout{
		transform: scale(0.75);
		margin: 0 0 -15% -15%;
		left: 0vw;
	}
	.titleClients{
		overflow: hidden;
		position: relative;
		width: 430px;
		height: 73px;
		margin: 5vh 0 0% -1%;
	}
	.titleCareer{
		overflow: hidden;
		position: relative;
		width: 430px;
		height: 73px;
		margin: 5vh 0 0% -5%;
	}
	.titleServices{
		transform: scale(0.85);
		margin: 5vh 0 0% -5%;
	}
	.titleContact{
		transform: scale(0.85);
		margin: 5vh 0 0% -8%;
	}
	.titleProject {
		transform: scale(0.88);
		left: 0vw;
		margin: 5vh 0 3vh -4%;
	}

	.titleProject iframe, .titleContact iframe, .titleClients iframe, .titleCareer iframe{
		position: absolute;
		transform: scale(0.7);
	}
	.heading-title h1 {
		font-size: 1.1em;
		left: 0;
		margin: 0 0 2% 0%;
	}
	.heading-title p {
		font-size: 0.78em;
		line-height: 1.8em;
		margin: 0 0 3% 6%;
		left: 0;
	}
	.heading-title a {
		font-size: 0.78em;
		margin: 0 0 0 6%;
		left: 0;
	}
	.aboutImg {
		margin:0;
	}
	.textBox {
		margin: 25% auto 0%;
	}
	.aboutrow {
		padding: 5vh 0 0% 0%;
	}
	
	.googlemap iframe {
		width: 100%;
		height: 50vh;
		/* float: left; */
		left: 0;
	}
}

@media (max-width: 992px) {
	/*#logo{
		left: 6%;
	}*/
	.d-p{display:none;}
	.d-m{display:block;}
	.split-box{
		position: relative;
		top: 0;
		margin: 15% 0 0% 0;
	}

	.heading-title h1{
		font-size: 2em;
		left: 0vw;
		margin: 0 0 1.5% 0;
	}

	.heading-title p{
		left: 0;
		width: 98%;
		font-size: 1.2em;
		margin: 0 0 0 3%;
		text-align: justify; text-justify: inter-ideograph; /*-ms-text-justify: inter-ideograph; /IE9/ -moz-text-align-last:justify; /Firefox/ -webkit-text-align-last:justify; /Chrome/*/

	}

	
	.heading-title a {
		font-size: 1.2em;
		margin: 0 0 0 3%;
	}
	
	.titleAbout{
		transform: scale(0.95);
		margin: 8% 0 -3% 0%;
		left: 0vw;
	}
	.titleProject {
		transform: scale(0.95);
		position: relative;
		margin: 5% 0 3% 4%;
		/* width: 100%; */
		left: 0vw;
	}
	.titleClients{
		width: 430px;
		height: 73px;
		margin: 10vh 0 0 0%;
	}
    .titleCareer{
		width: 430px;
		height: 73px;
		margin: 10vh 0 0 5%;
	}
	.titleProject iframe, .titleContact iframe, .titleClients iframe, .titleCareer iframe{
		position: absolute;
		/*transform: scale(0.7);*/
		transform: scale(1);
	}

	.titleContact{
		transform: scale(0.88);
    	margin: 10vh 0 0 0%;
	}
	.aboutrow{
		padding: 10vh 0 0% 0%;
		}
	.titleServices{
		transform: scale(0.85);
		position: relative;
		margin: 13vh 0 0 -5%;
		/*width: 100%;*/
		left: 0vw;
	}
	
	.clients {
		margin: 3% auto 0%;
	}


	.aboutImg{
		margin: -2% 0 6% 0;
	}
	/****join us****/
	.textBox{
		width:90%;
		margin: 40% auto 0%;
	}
	/****contact****/
	.googlemap {
		position: relative;
		margin: 5% auto 0%;
		width: 96%;
	}
	.contactInfo {
		position: relative;
		margin: 0 0 0 0%;
		width: 100%;
		top: 0;
		left: 0;
		/* float: left; */
		padding: 2% 3%;
	}
	
}
@media (max-width: 760px) {
	.heading-title h1 {
		font-size: 1.75em;
	}
	.titleClients{
		transform: scale(0.8);
		margin: 13vh 0 0 -2%;
	}
	.titleCareer{
		transform: scale(0.8);
		margin: 13vh 0 0 0%;
	}
	.titleServices {
		margin: 13vh 0 0 -8%;
	}
}

@media (max-width: 480px) {
	.split-box{
		margin: 20% 0 0% 0;
	}

	.heading-title h1 {
		font-size: 1.35em;
	}

	.heading-title p{
		eft: 0%;
		font-size: 0.95em;
		line-height: 1.5em;
		margin: 0 0 3% 2%;
		width: 95%;
	}
	
	.heading-title a {
		font-size: 1em;
	}
	
	.titleAbout{
		transform: scale(0.8);
		margin: 0 0 -10% -10%;
	}
	.titleProject{
		transform: scale(0.8);
		margin: 0 0 -10% -5%;
	}
	
	.titleClients{
		transform: scale(0.8);
		margin: 8vh 0 -3% -17%;
	}
	.titleCareer{
		transform: scale(0.8);
		 margin: 8vh 0 -3% -10%;
	}
	   
	.titleServices{
		transform: scale(0.8);
		margin: 8vh 0 0% -22%;
	}
	.aboutrow{
		padding: 8vh 0 0% 0%;
		}
	.titleContact {
		transform: scale(0.58);
		margin: 8vh 0 0 -28%;
	}
	.clients {
		margin: 3% auto 0%;
	}
	.textBox h1{
		font-size: 2em;
	}
	.textBox p{
		font-size: 0.7em;
	}
	.careerLink {
		margin-top: 3vh;
	}
	.textBox{
		width:90%;
		margin: 10% auto;
	}
	.aboutImg{
		margin: 0% 0 6% 0;
	}
	.map-responsive{width:100% !important;}
	.googlemap {
		position: relative;
		margin: 0% auto;
		width: 98%;
	}
	
		
	.contactInfo {
		padding: 5%;
	}
	.cpName {
		padding: 3% 0;
	}
	.contactInfo ul {
		padding: 0;
	}
	.contactInfo ul li{
		margin: 20px 0 0 0;
        padding: 0 0 0 8%;
	}
	
	.contactInfo ul p {
		margin-bottom: 3vh;
	}
}

@media (max-width: 414px) {
	.split-box{
		margin: 25% 0 0% 0;
	}

	.titleAbout{
		transform: scale(0.55);
    	margin: 0vh 0 -12% -25%;
	}
	
	.titleProject{
		transform: scale(0.6);
    	margin: 3vh 0 2% -18%;
	}
	.projects {
		top: 0;
		left: 0;
	}
	.titleClients{
		transform: scale(0.58);
    	margin:3vh 0 0% -24%;
	}
	 .titleCareer{
		transform: scale(0.6);
    	margin: 1.5vh 0 0% -20%;
	}
	.titleServices {
		transform: scale(0.6);
		margin: 3vh 0 0% -47%;
	}
	.titleContact {
		transform: scale(0.58);
		margin: 3vh 0 0 -28%;
	}
	.aboutrow{
		padding: 1.5vh 0 5% 0%;
		}
	.heading-title{
		margin: 0 0 2% 0;
	}
	.heading-title h1{
		font-size: 1.25em;
	}
	.contactT{padding:0 0 2% 0;}
	.contactInfo h4{
		font-size: 1.45em;
		width:100%;
	}
	.contactInfo span {
		font-size: 0.75em;
	}
	.contactInfo li h4 {
		font-size: 1.3em;
	}
	.contactInfo ul p {
		font-size: 1.1em;
	}
	.contactInfo ul li {margin: 20px 0 0 0;}
	.googlemap {
		margin: 0% auto 0%;
	}	
}
@media (max-width: 375px) {
	
	.heading-title h1{
		font-size: 1.1em;
		margin: 0 0 1.5% 0;
	}
	
	.heading-title p{
		width: 93%;
		font-size: 1em;
		margin: 0 0 3% 2%;
	}
	
	
	
	.titleAbout {
		margin: 0% 0 -10% -28%;
	}
	.titleServices {
		margin: 3vh 0 0% -53%;
	}
	.titleProject {
		transform: scale(0.53);
		margin: 3vh 0 0% -26%;
	}
	.titleClients {
		margin: 3vh 0 0% -22%;
	}
	.titleContact {
		transform: scale(0.58);
		margin: 3vh 0 0 -32%;
	}
	.aboutrow{
		padding: 1.5vh 0 0% 0%;
		}
	.aboutrow p{
		font-size: 0.95em;
    	margin: 0 0 0.5rem 0;
	}
	.titleCareer {
		margin: 3vh 0 0% -20%;
	}
	.contactInfo h4 {
		font-size: 1.4em;
	}
	.contactInfo span {
		font-size: 0.55em;
	}
	.contactInfo li h4 {
		font-size: 1.2em;
	}
	.contactInfo ul p {
		font-size: 1em;
	}
	/****join us****/
	.textBox h1{
		font-size: 2em;
	}
	.textBox p{
		font-size: 0.7em;
	}
	.careerLink {
		margin-top: 3vh;
	}
	.textBox{
		margin: 55% auto 0%;
	}
	
}
@media (max-width: 320px) {
	/*h1 {
		font-size: 1.2em !important;
	}*/
	/*.cta a {
		top: 0.7em !important;
	}*/
	.split-box{
		margin: 30% 0 0% 0;
	}
	
	.heading-title h1{
		font-size: 0.92em;
		margin: 0 0 1.5% 0;
	}
	.heading-title p{
		width: 96%;
		font-size: 0.8em;
		margin: 0 0 0 1%;
		line-height: 2.2em;
	}
	.heading-title a {
		margin: 3% 0 5% 1%;
		display:block;
	}
	.titleProject {
		transform: scale(0.45);
		margin: 1.5vh 0 0 -37%;
	}
	.titleCareer {
		transform: scale(0.52);
		margin: 1.5vh 0 0% -30%;
	}
	.titleContact {
		transform: scale(0.46);
		margin: 1.5vh 0 0 -48%;
	}
	.aboutrow{
		padding: 1.5vh 0 0% 0%;
		}
	.aboutrow p{
		font-size:0.8em;
	}
	.titleClients {
		transform: scale(0.53);
		margin: 1.5vh 0 0% -32%;
	}
	.titleServices {
		transform: scale(0.52);
		margin: 1.5vh 0 0% -77%;
	}
	.titleAbout {
		transform: scale(0.48);
    	margin: 0% 0 -15% -40%;
	}
	/****join us****/
	.textBox{
		width:90%;
		margin: 50% auto;
	}
	.textBox h1{
		font-size: 1.8em;
	}
	.textBox p{
		font-size: 0.4em;
	}
	.careerLink {
		margin-top: 3vh;
	}
	.textBox{
		margin: 35% auto 0%;
	}
	.contactInfo {
		padding: 2%;
	}
	.contactInfo h4 {
		font-size: 1.2em;
	}
	.contactInfo span {
		font-size: 0.45em;
	}
	.cpName{
		padding: 5% 0;
	}
	.contactInfo li h4 {
		font-size: 1.05em;
	}
	.contactInfo ul p {
		font-size: 0.85em;
	}
}