/* stylesheet information
File created date: 03.01.2017
By: Sze Wei
Last modified date: 11.04.2017
By: Sze Wei
*/

/* reset */
* {padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
del {text-decoration: line-through;}
abbr[title], dfn[title] {
	border-bottom:1px dotted #ccc;
	cursor:help;
}
.clear {clear:both;}
.clear:after {
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	content: ".";
}
a img {border:none;}
img {border: 0px; -ms-interpolation-mode: bicubic; vertical-align: middle;}
input:focus, textarea:focus, select:focus {outline: none;}
.hide {display: none;}
.purge > img {clear: both; margin: 0; padding: 0;}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align:
	baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
table button, table input {*overflow: auto;}
/* end */

/* CSS 3 @ fontface */
@font-face {
    font-family: 'DINProBold';
    src: url('../fonts/ufonts_com_dinproboldopentype.eot');
    src: url('../fonts/ufonts_com_dinproboldopentype.eot') format('embedded-opentype'),
         url('../fonts/ufonts_com_dinproboldopentype.woff2') format('woff2'),
         url('../fonts/ufonts_com_dinproboldopentype.woff') format('woff'),
         url('../fonts/ufonts_com_dinproboldopentype.ttf') format('truetype'),
         url('../fonts/ufonts_com_dinproboldopentype.svg#ufonts_com_dinproboldopentype') format('svg');
		 font-weight: normal;
		 font-style: normal;
}

@font-face {
	font-family: 'DINProLight';
	src: url('../fonts/DINProLight.eot');
	src: local('DINProLight'), url('../fonts/DINProLight.woff') format('woff'), url('../fonts/DINProLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DINMedium';
	src: url('../fonts/DINMedium.eot');
	src: local('DINMedium'), url('../fonts/DINMedium.woff') format('woff'), url('../fonts/DINMedium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DINProRegular';
	src: url('../fonts/dinregularwebfont.eot');
	src: local('dinregularwebfont'), url('../fonts/dinregularwebfont.woff') format('woff'), url('../fonts/dinregularwebfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}



/* end */

/* basic structure */
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'DINProRegular', Helvetica, sans-serif;
	font-size: 62.5%;
	color: #000;
	background: #fff;
	hyphens: none;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}

.container {
	width: 100%;
	min-height: 100%;
	position: relative;
	overflow: hidden;
}

.wrapper {
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
}

.section {
	position: relative;
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	line-height: 1em;
	vertical-align: middle;
	display: block;
}

/*footer*/
.mobile_work.footer {
	display: none;
}

.footer {
	width: 100%;
	margin: 0 auto;
	height: auto;
	background: #1f1f1f;
	z-index: 2;
}

.footerLogo {
	margin-top: 64px;
	margin-bottom: 50px;
	float: left;
	width: 23%;
	padding: 0 50px 0 20px;
	display: inline-block;
}

.footerContent1, .footerContent2, .footerContent3 {
	margin: 50px 0;
	float: left;
	width: 23%;
	padding: 0 50px 0 20px;
	display: inline-block;
}

.scrollTop  {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.footerContent1, .footerContent2, .footerContent3 {
	color: #fff;
}

.footerContent1 h3, .footerContent2 h3, .footerContent3 h3 {
		font-family: 'DINProBold';
		font-size: 1.4em;
		line-height: 3;
}

.footerContent1 p, .footerContent2 p, .footerContent3 p {
		font-family: 'DINProRegular';
		font-size: 1.4em;
		line-height: 1.5;
}
.footerContent2 .socialIconBtn {
	width: 36px;
	height: 36px;
	display: inline-block;
	float: left;
	margin-right: 5px;
}
.footerContent2 .socialIconBtn.icoFacebook {background: url(../images/ico_facebook.png) center center no-repeat;}
.footerContent2 .socialIconBtn.icoInstagram {background: url(../images/ico_instagram.png) center center no-repeat;}
.footerContent2 .socialIconBtn.icoGooglePlus {background: url(../images/ico_google_plus.png) center center no-repeat;}
.footerContent2 .socialIconBtn.icoLinkedin {background: url(../images/ico_linkedin.png) center center no-repeat;}
.footerContent2 .socialIconBtn.icoYoutube {background: url(../images/ico_youtube.png) center center no-repeat;}
.footerContent2 .socialIconBtn.icoTwitter {background: url(../images/ico_twitter.png) center center no-repeat;}
/*end footer*/

/*landing*/
#loading {
	 width: 100%;
	 height: 100%;
	 position: fixed;
	 background: #fff url(../images/Loading_icon.gif) no-repeat center center;
	 z-index: 999;
}

.landing #videoBg {
	background: transparent url(../images/) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/*width: 100%;*/
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	position: absolute;
	display: block;
	z-index: -100;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
}

.header {
	width: 100%;
	position: fixed !important;
	z-index: 999;
	top: 0;
	/*background: rgba(255, 255, 255, 0.3);*/
	-webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.content.active {
    overflow: hidden;
    position: fixed;
}

.nav {
	width: 100%;
	height: auto;
}

#nav-icon3, #nav-iconWork {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 25px;
	float: right;
	text-align: center;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
	background-color: #3cd52e;
	z-index: 3;
}

#nav-icon3 span, #nav-iconWork span {
  display: block;
  position: absolute;
  height: 2px;
  width: 45%;
  background: #221f1f;
  border-radius: 5px;
  opacity: 1;
  left: 27%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1), #nav-iconWork span:nth-child(1) {
  top: 18px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3), #nav-iconWork span:nth-child(2), #nav-iconWork span:nth-child(3) {
  top: 24px;
}

#nav-icon3 span:nth-child(4), #nav-iconWork span:nth-child(4) {
  top: 30px;
}

#nav-icon3.open span:nth-child(1), #nav-iconWork.open span:nth-child(1) {
  top: 24px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2), #nav-iconWork.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3), #nav-iconWork.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4), #nav-iconWork.open span:nth-child(4){
  top: 17px;
  width: 0%;
  left: 50%;
}

.logo {
	/*width: 18%;*/
	max-width:350px;
	height:auto;
	margin-top: 12px;
	margin-left: 25px;
	float: left;
	display: block;
	position: relative;
}
.logo img {
	width: 100%;
	height: auto;
}

.mobileLogo {
	float: left;
	display: none;
	margin: 25px 0 0 25px;
}

.landingContent {
	display: inline-block;
	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
}

.landingContent p {
	position: absolute;
	color: #fff;
	margin: 0 0 0 130px;
	padding: 0 0 0 6px;
	border-left: solid 1px #fff;
	height: 120px;
	font-family: 'DINProRegular';
	font-size: 1.1em;
	bottom: 140px;
}

.landingContent h1 {
	color: #fff;
	font-family: 'DINProBold';
	font-size: 8em;
	letter-spacing: 0.1em;
}

.tagline2 {
	margin-left: 73px;
}

.tagline3 {
  margin-left: -3px;
}

.block-revealer__element {
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
	height: 60%;
	background: #000;
	pointer-events: none;
}

.navBackground {
	background: #fff;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1;
	display: none;
}

.navBackground.active {
	display: block;
}

.mobile_header {
	background: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100px;
	z-index: 1000;
	display: none;
}

.workList_Content {
	width: 360px;
	height: 50%;
	padding-right: 73px;
	position: fixed;
	float: right;
	right: 0;
	bottom: 20px;
	z-index: 2;
	overflow-x: hidden;
	overflow-y: scroll;
	background: #fff;
	display: none;
}

.workList_Content.active {
	display: block;
}

.workList_Content::-webkit-scrollbar {
  display: none;
}

.workList_Content h1 {
	font-family: 'DINProBold';
	font-size: 6em;
	color: #221f1f;
	padding-bottom: 25px;
}

.workList_Content h2 {
	color: #231f20;
	font-size: 2.2em;
	font-family: 'DINProRegular';
	padding-bottom: 10px;
}

.workList_Content p {
	font-size: 1.6em;
  line-height: 1.3em;
  font-family: 'DINProLight';
	padding-bottom: 20px;
}

.workList {
	float: left;
	width: 50%;
	height: 100%;
	position: fixed;
	display: none;
	z-index: 2;
	overflow-x: hidden;
	overflow-y: scroll;
	background: #fff;
}

.workList::-webkit-scrollbar {
    display: none;
}

.workList.active {
	display: block;
}

.workList a  {
	width: 100%;
	height: 200px;
	overflow: hidden;
	margin-bottom: 10px;
	position: relative;
	display: block;
	text-decoration: none;
}

.workListContent1  {
	background: url(../images/work1.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	bac kground-size: cover;
}

.workList a div {
	background: rgba(60, 213,46,0.8);
	width:100%;
	height: 200px;
	position: relative;
	left: 100%;
	text-align: center;
	font-size: 3em;
	color: #fff;
	padding-top: 80px;
}

.workList a:hover div {
	left: 0;
	-webkit-transition: all 0.80s ease-in-out;
	-moz-transition: all 0.80s ease-in-out;
	-ms-transition: all 0.80s ease-in-out;
	-o-transition: all 0.80s ease-in-out;
	transition: all 0.80s ease-in-out;
}

.workListContent2  {
	background: url(../images/work2.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.workListContent3  {
	background: url(../images/work3.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.workListContent4  {
	background: url(../images/work4.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.workListContent5  {
	background: url(../images/work5.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.workListContent6  {
	background: url(../images/work6.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.workListContent7  {
	background: url(../images/work7.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.workListContent8  {
	background: url(../images/work8.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.workListContent9  {
	background: url(../images/work9.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.navContent {
  position: absolute;
	display: inline-block;
  top: 25px;
  width: 350px;
  text-align: right;
	padding-right: 73px;
	height: 0;
	overflow: hidden;
	z-index: 2;
	right: 0;
	margin-right: 10px;
}

.navContent.active {
	height: auto;
}

.navContent a {
	font-family: 'DINProBold';
  text-decoration: none;
  font-size: 5em;
  color: #221f1f;
  display: block;
	line-height: 33px;
	vertical-align: middle;
	width: 100%;
	height: 43px;
	position: relative;
	margin-bottom: 5px;
}

.navContent a div {
	width: 100%;
	background: #3cd52e;
	height: 36px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.navContent .navHome div {
	left: -107px;
}

.navContent .navAbout div {
	left: -127px;
}

.navContent .navWork div {
	left: -98px;
}

.navContent .navBlog div {
	left: -96px;
}

.navContent .navContact div {
	left: -184px;
}

.navContent a:hover div {
	left: 0;
	-webkit-transition: all 0.50s ease-in-out;
	-moz-transition: all 0.50s ease-in-out;
	-ms-transition: all 0.50s ease-in-out;
	-o-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
}
/*end landing*/

/*scroll down plugin*/
section {
	position: relative;
	width: 100%;
	height: 100%;
}

section::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 80%;
}

.demo a {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 3;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	transition: opacity .3s;
}
.demo a:hover {
	opacity: .5;
}

#arrowScroll a {
	padding-top: 60px;
}
#arrowScroll a span {
	position: absolute;
	/*top: 0;*/
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -12px;
	border-left: 4px solid #3cd52e;
	border-bottom: 4px solid #3cd52e;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb04 2s infinite;
	animation: sdb04 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
	}
	20% {
		-webkit-transform: rotate(-45deg) translate(-10px, 10px);
	}
	40% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
	}
}
@keyframes sdb04 {
	0% {
		transform: rotate(-45deg) translate(0, 0);
	}
	20% {
		transform: rotate(-45deg) translate(-10px, 10px);
	}
	40% {
		transform: rotate(-45deg) translate(0, 0);
	}
}
/*end scroll down plugin*/

/*about*/
.paginationShadow {
	width: 125px;
	height: 100%;
	background: url(../images/pagination_shadow.png) 0 0 repeat-y;
	position: absolute;
	top: 0;
	right: 0;
}
.aboutUs, .aboutServices, .ourClient{
	background: #f1f2f2;
}

/*.aboutUsContainer {
	padding: 100px 0 60px 0;
	margin: 0 auto;
}*/

.aboutContent p {
	padding-bottom: 20px;
}

.aboutContent h2 {
	padding-bottom: 30px;
}

.aboutContent {
	width: 100%;
	text-align: left;
	padding: 0 20%;
	margin: 0 auto;
}

.aboutContent h1 {
	font-size: 5.5vw;
	font-family: 'DINProBold';
	padding-bottom: 38px;
}

.aboutContent h2 {
	color: #231f20;
	line-height: 1.3;
	font-family: 'DINProRegular';
	font-weight: 600;
}

.aboutContent ul {
	text-align: center;
    list-style: none;
	margin: 0px -90px 0px;
	
}

.aboutContent ul li {
    list-style: disc;
    list-style-position: outside;
	display: inline-block;
    margin-bottom: -10px;
}
.aboutContent ul li a {
	margin: 15px 10px;
	}

.aboutContent a {
	display: block;
}

@media (max-width: 1089px) {
	.aboutContent ul {
	margin: 0px -60px 0px;
	} 
	.aboutContent ul li a {
	margin: 10px -5px;
	height: 77px !important;
	width: 140px !important;
	}
}

.aboutLogo {
	overflow: hidden;
	z-index: 1;
	background: url(../images/aboutbackground1.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	position: relative;
}

h1.fixedAbout {
	font-size: 5.5vw;
	height: auto;
	font-family: 'DINProBold';
	display: block;
	position: fixed;
	color: #fff;
	top: 45%;
	left: 25%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

h1.fixedAbout.slide {
	top: 55%;
	opacity: 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.aboutContent h1 span.about1, .aboutContent h1 span.about2, .aboutContent h1 span.about3, .aboutContent h1 span.about4, .aboutContent h1 span.about5 {
	top: -100px;
	opacity: 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.aboutContent h1 .about1.appear, .aboutContent h1 .about2.appear, .aboutContent h1 .about3.appear, .aboutContent h1 .about4.appear, .aboutContent h1 .about5.appear {
	top: 0;
	opacity: 1;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.aboutContent p {
	/*color: #4d4e4e;*/
	font-size: 1.8em;
	line-height: 1.3;
	font-family: 'DINProLight';
}

.aboutOurTeam {
	background: url(../images/aboutbackground2.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	position: relative;
	z-index: 2;
}

.aboutOurTeamContainer {
	width: 100%;
	position: relative;
	z-index: 3;
}

.aboutUs {
	width: 100%;
	position: relative;
	z-index: 1;
}

.aboutServices {
	width: 100%;
	position: relative;
	z-index: 1;
	background: url(../images/gradient_grey_white_bg.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ourClient {
	width: 100%;
	position: relative;
	z-index: 1;
}

.joinUsContainer {
	width: 100%;
	position: relative;
	z-index: 5;
	margin-bottom: 2%;
}

.ourClientContainer {
	width: 100%;
	position: relative;
	z-index: 5;
}

.servicesText h2, .servicesText p {
	padding-bottom: 20px;
}

.servicesText li {
	color: #4d4e4e;
	font-size: 1.8em;
	line-height: 1.3;
	font-family: 'DINProLight';
}

.servicesText h2 {
	color: #231f20;
	font-size: 2.2em;
	line-height: 1.3;
	font-family: 'DINProRegular';
}

.servicesText p {
	/*color: #4d4e4e;*/
	font-size: 1.8em;
	line-height: 1.3;
	font-family: 'DINProLight';
}

.servicesImage {
	width: 45%;
	float: left;
	left: -20px;
	position: relative;
	margin: 30px 0 0 0;
}

.servicesText {
	width: 50%;
	float: right;
	padding-left: 5%;
	padding-top: 30px;
}

.ipad {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
}

.animationGif {
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	padding: 21% 13%;
}

/*form*/
form {
	width: 100%;
	position: relative;
}

form .formTextField {
	width: 47%;
	height: 45px;
	/*background: #000;*/
	border: 1px solid #000;
	margin-top: 20px;
	position: relative;
	float: left;
	margin-right: 3%;
}


form .formTextField input {
	width: 100%;
	height: 45px;
	padding: 1% 3%;
	font-family: 'DINProRegular';
	font-size: 1.4em;
	line-height: 50px;
	color: #3cd52e;
	background: none;
	border: none;
	outline: none;
}

form .formTextArea {
	width: 97%;
	margin-right: 3%;
	margin-top: 20px;
	height: 100px;
	position: relative;
	border: 1px solid #000;
}

form .formTextArea textarea {
	width: 100%;
	height: 95px;
	padding: 2% 1.5%;
	font-family: 'DINProRegular';
	font-size: 1.4em;
	color: #3cd52e;
	background: none;
	border: none;
	outline: none;
	resize: none;
}

form .formTextField ::-webkit-input-placeholder {color: #a7a9ac;}
form .formTextField :-moz-placeholder {color: #a7a9ac;}
form .formTextField ::-moz-placeholder {color: #a7a9ac;}
form .formTextField :-ms-input-placeholder {color: #a7a9ac;}

form .formTextArea ::-webkit-input-placeholder {color: #a7a9ac;}
form .formTextArea :-moz-placeholder {color: #a7a9ac;}
form .formTextArea ::-moz-placeholder {color: #a7a9ac;}
form .formTextArea :-ms-input-placeholder {color: #a7a9ac;}

form .form_attachment {
	float: left;
}

form .btnSubmit {
	/*width: 20%;*/
	padding: 0 5%;
	float: right;
	margin-right: 3%;
	height: 45px;
	line-height: 45px;
	background: #3cd52e;
	font-family: 'DINProLight';
	font-size: 1.8em;
	text-decoration: none;
	text-align: center;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	/*margin-top: 30px;*/
	cursor: pointer;
	display: inline-block;
	border: none;
	outline: none;
	-webkit-appearance: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	/*margin-bottom: 60px;*/
}

form .btnSubmit:hover {
	background: #1f1f1f;
}

form h3 {
	font-size: 1.8em;
	line-height: 1.4em;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #4d4e4e;
	font-family: 'DINProLight';
}
form h3 a {color: #fede00; text-decoration: none;}
form .btnAttach {
	padding: 4px 10px;
	text-align: center;
	display: inline-block;
	font-size: 1.4em;
	text-decoration: none;
	color: #000;
	border: 1px solid #bbb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
/*end of form*/
/*end about*/

/*portfolio1*/
.portfolio1 {
	background: url(../images/portfoliobackground1.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center top;
	z-index: 1;
}

.m_portfolio1Section1 {
	display: none;
}

.portfolioContainer {
	width: 100%;
	margin: 0 auto;
}

.portfolio1Content {
	width: 50%;
	height: auto;
	margin: 100px auto;
}

.portfolio1Content h2 {
	font-family: 'DINProRegular';
	font-size: 4.2em;
	margin-bottom: 30px;
}

.portfolio1Content h3 {
	font-family: 'DINProBold';
	font-size: 2.2em;
	margin-bottom: 5px;
	color: #b3b1b3;
}

.portfolio1Content p {
	font-family: 'DINProLight';
	font-size: 1.8em;
	margin-bottom: 15px;
	/*color: #211e1f;*/
}

.portfolio1Section1 {
	width: 100%;
	height: auto;
	background: #fddd00;
	text-align: center;
}

.portfolio1Section1 img.item01 {
	width: 100%;
	position: relative;
	top: -10%;
	opacity: 0;
}
.portfolio1Section1 img.item01 {
	width: 100%;
	position: relative;
	top: -10%;
	opacity: 0;
	-webkit-transition: .35s ease-out;
  -moz-transition: .35s ease-out;
  -o-transition: .35s ease-out;
  transition: .35s ease-out;
}
.portfolio1Section1 img.item01.active {
	top: 0;
	opacity: 1;
}
.portfolio1Section2 img {
	width: 100%;
}

.portfolio1Section3 img {
	width: 100%;
}

.gradientbackground {
	height: auto;
	background: white; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(white, white, #e6e7e8); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(white, white, #e6e7e8); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(white, white, #e6e7e8); /* For Firefox 3.6 to 15 */
	background: linear-gradient(white, white, #e6e7e8); /* Standard syntax (must be last) */
}

.folio1_item1 {
	height: auto;
	text-align: center;
	opacity: 0;
	position: relative;
	right: -20%;
	-webkit-transition: .35s ease-out;
  -moz-transition: .35s ease-out;
  -o-transition: .35s ease-out;
  transition: .35s ease-out;
}
.folio1_item1.active {
	opacity: 1;
	right: 0;
}
.folio1_item1 img {
	width: 60%;
	margin-top: -12%;
	margin-left: 250px;
}

.folio1_item2 {
	height: auto;
	text-align: center;
	opacity: 0;
	position: relative;
	left: -20%;
	-webkit-transition: .35s ease-out;
  -moz-transition: .35s ease-out;
  -o-transition: .35s ease-out;
  transition: .35s ease-out;
}
.folio1_item2.active {
	opacity: 1;
	left: 0;
}
.folio1_item2 img {
	width: 55%;
}

.folio1_item3 {
	height: auto;
	text-align: center;
	opacity: 0;
	position: relative;
	right: -20%;
	-webkit-transition: .35s ease-out;
  -moz-transition: .35s ease-out;
  -o-transition: .35s ease-out;
  transition: .35s ease-out;
}
.folio1_item3.active {
	opacity: 1;
	right: 0;
}

.folio1_item3 img {
	width: 55%;
}

/*portfolio2*/
.portfolio2 {
	background: url(../images/portfoliobackground2.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center top;
}

.m_portfolio2Section1 {
	display: none;
}

.portfolio2Section1 {
	width: 100%;
	background: #e6e7e8;
	text-align: center;
}

.portfolio2Section1 img {
	width: 55%;
	margin: 30px auto;
}

.portfolio2Section2 img {
	width: 100%;
}

.portfolio2Section3 {
	width: 100%;
	background: #e6e7e8;
	text-align: center;
}

.portfolio2Section3 img {
	width: 60%;
	margin: 30px auto;
}

.portfolio2Section4 img {
	width: 100%;
}

.m_portfolio2Section4 {
	display: none;
}

.portfolio2Section5 img {
	width: 100%;
}

.portfolio2Section6 img {
	width: 100%;
}
/*end portfolio2*/

/*portfolio3*/
.portfolio3 {
	background: url(../images/portfoliobackground3.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center top;
}

.m_portfolio3Section1 {
	display: none;
}

.portfolio3Section1 {
	width: 100%;
	height: 420px;
	background: #231f20;
	text-align: center;
}

.portfolio3Section1 img {
	margin: 100px auto;
}

.portfolio3Section2 img {
	width: 100%;
}
/*end portfolio3*/

/*portfolio4*/
.portfolio4 {
	background: url(../images/portfoliobackground4.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center top;
}

.m_portfolio4Section1 {
	display: none;
}

.portfolio4Section1 img {
	width: 100%;
}

.portfolio4Section2 {
	background: url(../images/folio4image3.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	text-align: center;
}

.portfolio4Section2 img {
	width: 70%;
}
/*end portfolio4*/

/*portfolio5*/
.portfolio5 {
	background: url(../images/portfoliobackground5.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center bottom;
}

.m_portfolio5Section1 {
	display: none;
}

.portfolio5Section1 {
	background: url(../images/folio5image1.jpg) no-repeat center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	text-align: center;
}

.portfolio5Section1 img {
	padding-top: 12%;
	width: 70%;
}

.portfolio5Section2 {
	width: 100%;
	text-align: center;
}

.portfolio5Section2 img {
	width: 80%;
}

.portfolio5Section3 img {
	width: 100%;
}

.portfolio5Section3_content1 {
	position: absolute;
	bottom: 7%;
	left: 25%;
	padding: 1% 1% 1% 2%;
	margin: 0 auto;
	width: 50%;
	height: auto;
	background: rgba(247, 214, 62, 0.9);
	border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

.portfolio5Section3_content1 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 4.2vw;
}

.portfolio5Section3_content2 h1, .portfolio5Section3_content3 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 2.5vw;
	color: #fff;
}

.portfolio5Section3_content2 h2, .portfolio5Section3_content3 h2 {
	font-family: 'DINProRegular';
	font-size: 6vw;
	color: #fff;
	/*line-height: 3vw;*/
}

.portfolio5Section3_content1 p {
	margin-bottom: 15px;
	font-family: 'DINProLight';
	font-size: 1vw;
	line-height: 1.3vw;
	letter-spacing: 0.015em;
}

.portfolio5Section3_content2 p, .portfolio5Section3_content3 p {
	font-family: 'DINProLight';
	font-size: 1.4vw;
	color: #fff;
	/*line-height: 1.4vw;*/
}

.portfolio5Section3_content2 {
	position: absolute;
	top: 15%;
	left: 23%;
	padding: 2% 2% 2% 6%;
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(238, 101, 115, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

.portfolio5Section3_content3 {
	position: absolute;
	bottom: 15%;
	right: 25%;
	padding: 3% 2% 3% 6%;
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(59, 175, 147, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

/*imageSlider*/
.portfolioSlider {
	width: 100%;
	position: relative;
	margin-bottom: 30px;
}

.image_slider {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.image_slider img {
	width: 100%;
}
/*imageSlider*/

/*end portfolio5*/

/*portfolio6*/
.portfolio6 {
	background: url(../images/portfoliobackground6.jpg) no-repeat top right;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center top;
}

.m_portfolio6Section1 {
	display: none;
}

.portfolio6Section1 {
	background: url(../images/folio6image1.jpg) no-repeat center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	text-align: center;
}

.portfolio6Section1 img {
	padding-top: 12%;
	width: 70%;
}

.portfolio6Section2 {
	width: 100%;
	text-align: center;
}

.portfolio6Section2 img {
	width: 80%;
}

.portfolio6Section3 {
	width: 100%;
	position: relative;
}

.portfolio6Section3 img {
	width: 100%;
}

.portfolio6Section3_content {
	position: absolute;
	top: 5%;
	left: 20%;
	padding: 1% 1% 1% 2%;
	margin: 0 10px 0 auto;
	width: 60%;
	height: auto;
	background: rgba(241, 217, 158, 0.9);
	border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

.portfolio6Section3_content h2 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 4.2vw;
}

.portfolio6Section3_content p {
	margin-bottom: 15px;
	font-family: 'DINProLight';
	font-size: 1.1vw;
	line-height: 1.3vw;
	letter-spacing: 0.015em;
}

.portfolio6Section4 img {
	width: 100%;
}

/*end portfolio6*/

/*portfolio7*/
.portfolio7 {
	background: url(../images/portfoliobackground7.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center bottom;
}

.m_portfolio7Section1 {
	display: none;
}

.portfolio7Section1 {
	background: url(../images/maws_klpass_web_01.jpg) no-repeat center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	text-align: center;
}

.portfolio7Section1 img {
	width: 100%;
}

.portfolio7Section2 {
	width: 100%;
	text-align: center;
}

.portfolio7Section2 img {
	width: 80%;
}

.portfolio7Section3 img {
	width: 100%;
}

.portfolio7Section3_content1 {
	position: absolute;
	top: 20%;
	left: 15%;
	padding: 1% 2% 1% 3%;
	margin: 0 auto;
	width: 40%;
	background: rgba(247, 214, 62, 0.9);
	border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

.portfolio7Section3_content1 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 4.2vw;
}

.portfolio7Section3_content2 h1, .portfolio7Section3_content3 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 2.5vw;
	color: #fff;
}

.portfolio7Section3_content2 h2, .portfolio7Section3_content3 h2 {
	font-family: 'DINProRegular';
	font-size: 6vw;
	color: #fff;
	/*line-height: 3vw;*/
}

.portfolio7Section3_content1 p {
	margin-bottom: 15px;
	font-family: 'DINProLight';
	font-size: 1vw;
	line-height: 1.3vw;
	letter-spacing: 0.015em;
}

.portfolio7Section3_content2 p, .portfolio7Section3_content3 p {
	font-family: 'DINProLight';
	font-size: 1.4vw;
	color: #fff;
	/*line-height: 1.4vw;*/
}

.portfolio7Section3_content2 {
	position: absolute;
	top: 15%;
	left: 40%;
	padding: 2% 2% 2% 6%;
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(190, 189, 62, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.9);
}

.portfolio7Section3_content3 {
	position: absolute;
	bottom: 15%;
	right: 10%;
	padding: 3% 2% 3% 6%;http://maws.my/images/maws-klpass-travel-05.jpg
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(175, 15, 138, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.9);
}
/*end portfolio7*/

/*portfolio8*/
.portfolio8 {
	background: url(../images/portfoliobackground8.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center bottom;
}

.m_portfolio8Section1 {
	display: none;
}

.portfolio8Section1 {
	background: url(../images/maws_dfulab_02b.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	text-align: center;
}

.portfolio8Section1 img {
	width: 55%;
}

.portfolio8Section2 {
	width: 100%;
	text-align: center;
	
}

.portfolio8Section2 img {
	width: 80%;
}

.portfolio8Section3 img {
	width: 100%;
}

.portfolio8Section3_content1 {
	position: absolute;
	top: 5%;
	left: 20%;
	padding: 1% 1% 1% 2%;
	margin: 0 10px 0 auto;
	width: 60%;
	height: auto;
	background: rgba(0, 111, 255, 0.9);
	border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

.portfolio8Section3_content1 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 4.2vw;
	color: #fff;
}

.portfolio8Section3_content2 h1, .portfolio7Section3_content3 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 2.5vw;
	color: #fff;
}

.portfolio8Section3_content2 h2, .portfolio7Section3_content3 h2 {
	font-family: 'DINProRegular';
	font-size: 6vw;
	color: #fff;
	/*line-height: 3vw;*/
}

.portfolio8Section3_content1 p {
	margin-bottom: 15px;
	font-family: 'DINProLight';
	font-size: 1vw;
	line-height: 1.3vw;
	letter-spacing: 0.015em;
	color: #fff;
}

.portfolio8Section3_content2 p, .portfolio8Section3_content3 p {
	font-family: 'DINProLight';
	font-size: 1.4vw;
	color: #fff;
	/*line-height: 1.4vw;*/
}

.portfolio8Section3_content2 {
	position: absolute;
	top: 15%;
	left: 40%;
	padding: 2% 2% 2% 6%;
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(190, 189, 62, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.9);
}

.portfolio8Section3_content3 {
	position: absolute;
	bottom: 15%;
	right: 10%;
	padding: 3% 2% 3% 6%;http://maws.my/images/maws-klpass-travel-05.jpg
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(175, 15, 138, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.9);
}
/*end portfolio8*/

/*portfolio9*/
.portfolio9 {
	background: url(../images/portfoliobackground9.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 700px;
	position: relative;
	background-position: center bottom;
}

.m_portfolio9Section1 {
	display: none;
}

.portfolio9Section1 {
	background: url(../images/maws_dfulab_02b.jpg) no-repeat center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: auto;
	text-align: center;
}

.portfolio9Section1 img {
	width: 55%;
}

.portfolio9Section2 {
	width: 100%;
	text-align: center;
	
}

.portfolio9Section2 img {
	width: 80%;
}

.portfolio9Section3 img {
	width: 100%;
}

.portfolio9Section3_content1 {
	position: absolute;
	top: 5%;
	left: 20%;
	padding: 1% 1% 1% 2%;
	margin: 0 10px 0 auto;
	width: 60%;
	height: auto;
	background: rgba(0, 111, 255, 0.9);
	border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
}

.portfolio9Section3_content1 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 4.2vw;
	color: #fff;
}

.portfolio9Section3_content2 h1, .portfolio7Section3_content3 h1 {
	font-family: 'DINProRegular';
	font-size: 2.0vw;
	line-height: 2.5vw;
	color: #fff;
}

.portfolio9Section3_content2 h2, .portfolio7Section3_content3 h2 {
	font-family: 'DINProRegular';
	font-size: 6vw;
	color: #fff;
	/*line-height: 3vw;*/
}

.portfolio9Section3_content1 p {
	margin-bottom: 15px;
	font-family: 'DINProLight';
	font-size: 1vw;
	line-height: 1.3vw;
	letter-spacing: 0.015em;
	color: #fff;
}

.portfolio9Section3_content2 p, .portfolio8Section3_content3 p {
	font-family: 'DINProLight';
	font-size: 1.4vw;
	color: #fff;
	/*line-height: 1.4vw;*/
}

.portfolio9Section3_content2 {
	position: absolute;
	top: 15%;
	left: 40%;
	padding: 2% 2% 2% 6%;
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(190, 189, 62, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.9);
}

.portfolio9Section3_content3 {
	position: absolute;
	bottom: 15%;
	right: 10%;
	padding: 3% 2% 3% 6%;http://maws.my/images/maws-klpass-travel-05.jpg
	margin: 0 auto;
	width: 36%;
	height: auto;
	background: rgba(175, 15, 138, 0.9);
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.9);
}
/*end portfolio9*/

/*imageSlider*/
.portfolioSlider {
	width: 100%;
	position: relative;
	margin-bottom: 30px;
}

.image_slider {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.image_slider img {
	width: 100%;
}

/*contact*/
.contactContainer {
	background: url(../images/contactbackground.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}

.contactContent {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.coffeeCup {
	float: right;
	width: 50%;
}

.coffeeCup img {
	width: 48%;
}

.namecard {
	float: right;
	width: 50%;
	padding-top: 2%;
}

/*testing*/
.namecardContent {
	width: 55%;
	-ms-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	transform: rotate(6deg);
}

.namecardContent img {
	width: 100%;
}

.socialIcon {
	position: absolute;
	top: 0;
	right: 15px;
	padding-top: 20px;
	padding-right: 15px;
}

.socialIcon1 {
	float: left;
	padding: 0 8px;
}

.socialIcon1 img {
	width: 100%;
}

.socialIcon1:last-child {
	padding-right: 0;
}
/*testing*/

/*.namecardContent {
	width: 350px;
	height: 200px;
	background: #fff;
	box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
	-webkit-border-bottom-right-radius: 25px;
	-moz-border-radius-bottomright: 25px;
	border-bottom-right-radius: 25px;
	-ms-transform: rotate(6deg);
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
}

.namecardLogo, .companyName {
	padding-left: 15px;
}

.namecardLogo {
	padding-top: 20px;
	display: inline-block;
}

.socialIcon {
	float: right;
	padding-top: 20px;
	padding-right: 15px;
}

.socialIcon1 {
	float: left;
	padding: 0 8px;
}

.socialIcon1:last-child {
	padding-right: 0;
}

.namecardBottom_info {
	padding-top: 70px;
  padding-bottom: 20px;
}

.companyName {
	width: 100px;
	float: left;
}

.companyName img {
	width: 100%;
}

.address {
	display: inline-block;
	text-align: right;
	padding-left: 6%;
}

.number {
	display: inline-block;
	padding-left: 7%;
	padding-right: 15px;
}

.numberIcon {
	min-width: 7px;
	display: inline-block;
	font-weight: bold;
	color: #80c242;
}

.numberContent {
	text-align: right;
	width: 65px;
	display: inline-block;
}

.number h5 {
	text-align: right;
	font-size: 0.8em;
	line-height: 1.3em;
}

.address p, .number p {
	font-family: 'DINProRegular';
	font-size: 0.8em;
	line-height: 1.3em;
}*/

.map {
	float: left;
	width: 50%;
	text-align: right;
	padding-right: 5px;
	height: auto;
	position: relative;
}

.map img {
	width: 60%;
}

.inPageMap {
 width: 82.7%;
 padding-bottom: 65.9%;
 margin-top: -56%;
 position: absolute;
 z-index: 2;
 top: 0;
 left: 5.6%;
 display: block;
}
/*end contact*/
/* end */

/* max queries */
@media (min-width: 1300px) {
	.servicesText p {
		font-size: 1.5vw;
	}
	.aboutContent p {
		font-size: 1.3vw;
	}
	.aboutContent h2 {
		font-size: 1.7vw;
	}
}
@media (max-width: 1299px) {
	.aboutContent p {
		font-size: 1.7vw;
	}
	.aboutContent h2 {
		font-size: 2.0vw;
	}
}

@media only screen 
	and (max-width: 1427px)
	and (min-width: 1161px) {
	.aboutContent {
		padding: 0 15%;
	}
}
	
@media (max-width: 1160px) {
	.aboutContent {
		padding: 0 10%;
	}
	
	.aboutContent p {
		font-size: 2.0vw;
	}
	.aboutContent h2 {
		font-size: 2.4vw;
	}
	
	h1.fixedAbout {
			left: 20%;
	}
}

@media (max-width: 950px) {
	.logo {
		display: none;
	}
	
	.aboutContent p {
		font-size: 2.4vw;
	}
	.aboutContent h2 {
		font-size: 2.8vw;
	}

	.mobile_work.footer {
		display: block;
	}

	.mobileLogo {
		display: block;
		z-index: 1000;
	}

	.mobile_header {
		display: block;
	}

	.header {
		background: #fff;
		position: relative;
		height: 100px;
	}

	.header.portfolio_header {
		background: rgba(255, 255, 255, 0.3);
	}

	.workList.active {
		width: 100%;
		padding-top: 85px;
	}

	.demo {
		display: none;
	}

	.navContent {
		left: 0;
		margin: 0 auto;
		top: 0;
		width: 350px;
		text-align: right;
		padding-right: 0;
		display: inline-block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.workList_Content.active {
		display: none;
	}

	/*about*/
	.aboutContent {
		padding: 0 10%;
	}

	.arrowScroll {
		display: none;
	}

	h1.fixedAbout {
			left: 15%;
			font-size: 8vw;
	}

	.aboutContent h1 {
		font-size: 8vw;
	}

	.footerLogo {
		margin-top: 0;
		margin-bottom: 0;
		width: 50%;
		padding: 30px 50px 0 15px;
	}

	.footerContent1 {
		width: 50%;
		margin-top: 0;
		margin-bottom: 0;
		padding: 15px 40px 30px 15px;
		float: right;
	}

	.footerContent2 {
		width: 50%;
		margin-top: 0;
		margin-bottom: 0;
		width: 50%;
		padding: 0 40px 20px 15px;
		float: left;
	}

	.footerContent3{
		margin-top: 0;
		margin-bottom: 0;
		width: 40%;
		padding: 0 40px 0 15px;
		/*float: none;*/
	}
	.scrollTop  {
		margin-top: 0;
		margin-bottom: 0;
		width: 10%;
		padding-bottom: 30px
	}
	/*end about*/

	/*portfolio1*/
	.portfolio1 {
		display: none;
	}

	.m_portfolio1Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio1Section1 img {
		width: 100%;
	}

	.portfolio1Content {
		width: 80%;
    margin: 60px auto
	}

	.folio1_item1 img {
		width: 80%;
		margin: -15% auto 0 auto;
	}

	.folio1_item2 img {
		width: 70%;
	}

	.folio1_item3 img {
		width: 70%;
	}
	/*end portfolio1*/

	/*portfolio2*/
	.portfolio2 {
		display: none;
	}

	.m_portfolio2Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio2Section1 img {
		width: 100%;
	}

	.portfolio2Section1 img {
		width: 70%;
		margin: 30px auto;
	}

	.portfolio2Section2 img {
		width: 100%;
	}

	.portfolio2Section3 img {
		width: 70%;
	}

	.portfolio2Section4 {
		display: none;
	}

	.m_portfolio2Section4 {
		display: block;
	}

	.m_portfolio2Section4 img {
		width: 100%;
	}
	/*end portfolio2*/

	/*portfolio3*/
	.portfolio3 {
		display: none;
	}

	.m_portfolio3Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio3Section1 img {
		width: 100%;
	}
	/*end of portfolio3*/

	/*portfolio4*/
	.portfolio4 {
		display: none;
	}

	.m_portfolio4Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio4Section1 img {
		width: 100%;
	}

	.portfolio4Section2 img {
		width: 80%
	}
	/*end of portfolio4*/

	/*portfolio5*/
	.portfolio5 {
		display: none;
	}

	.m_portfolio5Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio5Section1 img {
		width: 100%;
	}

	.portfolio5Section1 img {
		width: 80%;
	}

	.portfolio5Section2 img {
		width: 100%;
	}
	/*end portfolio5*/

	/*portfolio6*/
	.portfolio6 {
		display: none;
	}

	.m_portfolio6Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio6Section1 img {
		width: 100%;
	}

	.portfolio6Section1 img {
		width: 80%;
	}

	.portfolio6Section2 img {
		width: 100%;
	}
	/*end portfolio6*/
	
	/*portfolio7*/
	.portfolio7 {
		display: none;
	}

	.m_portfolio7Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio7Section1 img {
		width: 100%;
	}

	.portfolio7Section1 img {
		width: 80%;
	}

	.portfolio7Section2 img {
		width: 100%;
	}
	/*end portfolio7*/
	
	/*portfolio8*/
	.portfolio8 {
		display: none;
	}

	.m_portfolio8Section1 {
		display: block;
		/*margin-top: 85px;*/
	}

	.m_portfolio8Section1 img {
		width: 100%;
	}

	.portfolio8Section1 img {
		width: 80%;
	}

	.portfolio8Section2 img {
		width: 100%;
	}
	/*end portfolio8*/


	/*contact*/
	.contactContent {
		display: inline-block;
		position: relative;
		top: 0;
		left: 0;
		transform: none;
	}

	.coffeeCup {
		text-align: center;
		width: 100%;
		padding-top: 50px;
		margin-bottom: 40px;
	}

	.coffeeCup img {
		width: 40%;
		position: relative;
	}

	.namecard {
		margin-bottom: 40px;
		width: 100%;

	}

	.namecardContent {
		margin: 0 auto;
	}

	.map {
		float: none;
		text-align: center;
		width: 100%;
		margin-left: 2%;
		margin-top: 50px;
		margin-bottom: 30px;
	}

	.inPageMap {
	 padding-bottom: 54%;
	}

	.map img {
		width: 50%;
		position: relative;
	}
	/*end contact*/
}
.landing #videoBg-1 {
		display: none;
	}
@media (max-width: 680px) {
	.workList a div {
		background: rgba(60, 213,46,0.8);
		width:auto;
		height: auto;
		left: 0;
		text-align: center;
		font-size: 3em;
		color: #fff;
		padding: 10px 20px;
		position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}

	.workList a:hover div {
		left: 50%;
	}

	.landing #videoBg {
		display: none;
	}
	
	.landing #videoBg-1 {
	    display: block;
	    width: 100%;
	    height:auto;
	}

	.landing {
		background: url(../images/) center center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 100%;
	}

	/*about*/
	.aboutLogo {
		background: url(../images/aboutmobile1.jpg) center center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 100%;
	}

	.aboutContent {
		padding: 5% 10%;
	}

	.arrowScroll {
		display: none;
	}

	h1.fixedAbout {
			left: 10%;
			font-size: 9vw;
	}
	.servicesText li {
		font-size: 1.4em
	}
	.aboutContent p {
		font-size: 2.8vw;
	}

	.aboutContent h1 {
		font-size: 9vw;
	}

	.aboutContent h2 {
		font-size: 4vw;
	}

	.servicesImage {
		margin: 0 auto;
		float: none;
	}

	.servicesText {
		width: 100%;
		float: none;
	}

	form .form_attachment {
		float: none;
	}

	form .btnSubmit {
		float: none;
		position: relative;
		margin-top: 30px;
	}

	.footerLogo {
		margin-top: 40px;
		margin-bottom: 0;
		width: 100%;
		padding: 0 50px 0 15px;
		float: none;
	}

	.footerContent1, .footerContent2 {
		margin-top: 30px;
		margin-bottom: 0;
		width: 100%;
		padding: 0 49% 0 15px;
		float: none;
	}

	.footerContent3{
		margin-top: 30px;
		margin-bottom: 40px;
		width: 90%;
		padding: 0 40px 0 15px;
		float: left;
	}

	.scrollTop  {
		margin-top: 32px;
		margin-bottom: 0;
		width: 10%;
		padding-right: 15px;
		float: right;
	}

	.footerContent1 h3, .footerContent2 h3, .footerContent3 h3 {
			font-family: 'DINProBold';
			font-size: 1.4em;
			line-height: 2em;
	}

	.footerContent1 p, .footerContent2 p, .footerContent3 p {
			font-family: 'DINProRegular';
			font-size: 1.4em;
			line-height: 1.2em;
	}
	/*end about*/

	/*portfolio1*/
	.portfolio1Content {
		width: 80%;
	}

	.folio1_item1 img {
		width: 85%;
		margin: -16% auto 0 auto;
	}

	.folio1_item2 img {
		width: 80%;
	}

	.folio1_item3 img {
		width: 80%;
	}
	/*end portfolio1*/

	/*portfolio2*/
	.portfolio2Section1 img {
		width: 80%;
		margin: 30px auto;
	}

	.portfolio2Section3 img {
		width: 80%;
	}
	/*end portfolio2*/

	/*portfolio4*/
	.portfolio4Section2 img {
		width: 90%
	}
	/*end of portfolio4*/

	/*portfolio5*/
	.portfolio5Section1 img {
		width: 90%;
	}
	/*end portfolio5*/

	/*portfolio6*/
	.portfolio6Section1 img {
		width: 90%;
	}
	/*end portfolio5*/


	/*contact*/
	.namecardContent {
		width: 300px;
	}

	.coffeeCup img {
		width: 50%;
	}

	.map img {
		width: 70%;
	}
	.inPageMap {
	 padding-bottom: 77.2%;
	 margin-top: -55.2%;
	}
	/*end contact*/
}


/* mobile media queries */

/* iPhone 4 and 4S */
/* Portrait and Landscape */
@media only screen
	and (min-device-width: 320px)
	and (max-device-width: 480px)
	and (-webkit-min-device-pixel-ratio: 2) {

			.mobile_work.footer {
				display: block;
			}

			.mobile_header {
				display: block;
			}

			.workList a div {
				background: rgba(60, 213,46,0.8);
				width:auto;
				height: auto;
				left: 0;
				text-align: center;
				font-size: 3em;
				color: #fff;
				padding: 10px 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.workList a:hover div {
				left: 50%;
			}

			.landing #videoBg {
				display: none;
			}

.landing #videoBg-1 {
	    display: block;
	    width: 100%;
	    height:auto;
	}
	
			.landing {
				background: url(../images/) center center no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				width: 100%;
			}

			.logo {
				display: none;
			}

			.mobileLogo {
				display: block;
				margin: 25px 0 0 25px;
				float: left;
				z-index: 1000;
			}

			.header {
				background: #fff;
				position: relative;
				height: 100px;
			}

			.header.portfolio_header {
				background: rgba(255, 255, 255, 0.3);
			}

			.workList.active {
				width: 100%;
				padding-top: 85px;
			}

			.workList_Content.active {
				display: none;
			}

			.demo {
				display: none;
			}

			.navContent {
				left: 0;
				margin: 0 auto;
				top: 0;
				width: 350px;
				text-align: right;
				padding-right: 0;
				display: inline-block;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			/*about*/
			.aboutLogo {
				background: url(../images/aboutmobile1.jpg) center center no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				width: 100%;
			}

			.aboutContent {
				padding: 5% 10%;
			}

			.arrowScroll {
				display: none;
			}

			h1.fixedAbout {
					left: 10%;
					font-size: 9vw;
			}

			.aboutContent h1 {
				font-size: 9vw;
			}

			.aboutContent h2 {
				font-size: 4vw;
			}

			.servicesImage {
				margin: 0 auto;
				float: none;
			}

			.servicesText {
				float: none;
				width: 80%;
			}

			form .form_attachment {
				float: none;
			}

			form .btnSubmit {
				float: none;
				position: relative;
				margin-top: 30px;
			}

			.footerLogo {
				margin-top: 40px;
				margin-bottom: 0;
				width: 100%;
				padding: 0 50px 0 15px;
				float: none;
			}

			.footerContent1, .footerContent2 {
				width: 90%;
				margin-top: 30px;
				margin-bottom: 0;
				width: 100%;
				padding: 0 40px 0 15px;
				float: none;
			}

			.footerContent3{
				margin-top: 30px;
				margin-bottom: 40px;
				width: 90%;
				padding: 0 40px 0 15px;
				float: left;
			}

			.scrollTop  {
				margin-top: 32px;
				margin-bottom: 0;
				width: 10%;
				padding-right: 15px;
				float: right;
			}

			.footerContent1 h3, .footerContent2 h3, .footerContent3 h3 {
					font-family: 'DINProBold';
					font-size: 1.4em;
					line-height: 2em;
			}

			.footerContent1 p, .footerContent2 p, .footerContent3 p {
					font-family: 'DINProRegular';
					font-size: 1.4em;
					line-height: 1.2em;
			}
			/*end about*/

			/*portfolio1*/
			.portfolio1 {
				display: none;
			}

			.m_portfolio1Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio1Section1 img {
				width: 100%;
			}

			.portfolio1Content {
				width: 80%;
				margin: 60px auto
			}

			.folio1_item1 img {
				width: 85%;
				margin: -16% auto 0 auto;
			}

			.folio1_item2 img {
				width: 80%;
			}

			.folio1_item3 img {
				width: 80%;
			}
			/*end portfolio1*/

			/*portfolio2*/
			.portfolio2 {
				display: none;
			}

			.m_portfolio2Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio2Section1 img {
				width: 100%;
			}

			.portfolio2Section1 img {
				width: 80%;
				margin: 30px auto;
			}

			.portfolio2Section2 img {
				width: 100%;
			}

			.portfolio2Section3 img {
				width: 80%;
			}

			.portfolio2Section4 {
				display: none;
			}

			.m_portfolio2Section4 {
				display: block;
			}

			.m_portfolio2Section4 img {
				width: 100%;
			}
			/*end portfolio2*/

			/*portfolio3*/
			.portfolio3 {
				display: none;
			}

			.m_portfolio3Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio3Section1 img {
				width: 100%;
			}
			/*end of portfolio3*/

			/*portfolio4*/
			.portfolio4 {
				display: none;
			}

			.m_portfolio4Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio4Section1 img {
				width: 100%;
			}

			.portfolio4Section2 img {
				width: 90%
			}
			/*end of portfolio4*/

			/*portfolio5*/
			.portfolio5 {
				display: none;
			}

			.m_portfolio5Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio5Section1 img {
				width: 100%;
			}

			.portfolio5Section1 img {
				width: 90%;
			}

			.portfolio5Section2 img {
				width: 100%;
			}
			/*end portfolio5*/

			/*portfolio6*/
			.portfolio6 {
				display: none;
			}

			.m_portfolio6Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio6Section1 img {
				width: 100%;
			}

			.portfolio6Section1 img {
				width: 90%;
			}

			.portfolio6Section2 img {
				width: 100%;
			}
			/*end portfolio6*/

			/*contact*/
			.contactContent {
				display: inline-block;
				position: relative;
				top: 0;
				left: 0;
				transform: none;
			}

			.coffeeCup {
				text-align: center;
				width: 100%;
				padding-top: 50px;
				margin-bottom: 40px;
			}

			.coffeeCup img {
				width: 50%;
			}

			.namecard {
				margin-bottom: 40px;
				width: 100%;

			}

			.namecardContent {
				margin: 0 auto;
			}

			.map {
				float: none;
				text-align: center;
				width: 100%;
				margin-left: 2%;
				margin-top: 50px;
				margin-bottom: 30px;
			}

			.map img {
				width: 70%;
			}

			.namecardContent {
				width: 300px;
			}

			/*end contact*/
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* iPhone 6 */
/* Portrait and Landscape */
@media only screen
	and (min-device-width: 375px)
	and (max-device-width: 667px)
	and (-webkit-min-device-pixel-ratio: 2) {
			.mobile_work.footer {
				display: block;
			}

			.mobile_header {
				display: block;
			}

			.workList a div {
				background: rgba(60, 213,46,0.8);
				width:auto;
				height: auto;
				left: 0;
				text-align: center;
				font-size: 3em;
				color: #fff;
				padding: 10px 20px;
				position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			}

			.workList a:hover div {
				left: 50%;
			}

			.landing #videoBg {
				display: none;
			}

.landing #videoBg-1 {
	    display: block;
	    width: 100%;
	    height:auto;
	}
			.landing {
				background: url(../images/) center center no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				width: 100%;
			}

			.logo {
				display: none;
			}

			.mobileLogo {
				display: block;
				margin: 25px 0 0 25px;
				float: left;
				z-index: 1000;
			}

			.header {
				background: #fff;
				position: relative;
				height: 100px;
			}

			.header.portfolio_header {
				background: rgba(255, 255, 255, 0.3);
			}

			.workList.active {
				width: 100%;
				padding-top: 85px;
			}

			.workList_Content.active {
				display: none;
			}

			.demo {
				display: none;
			}

			.navContent {
				left: 0;
				margin: 0 auto;
				top: 0;
				width: 350px;
				text-align: right;
				padding-right: 0;
				display: inline-block;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			/*about*/
			.aboutLogo {
				background: url(../images/aboutmobile1.jpg) center center no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				width: 100%;
			}

			.aboutContent {
				padding: 5% 10%;
			}

			.arrowScroll {
				display: none;
			}

			h1.fixedAbout {
					left: 10%;
					font-size: 9vw;
			}

			.aboutContent h1 {
				font-size: 9vw;
			}

			.aboutContent h2 {
				font-size: 4vw;
			}

			.servicesImage {
				margin: 0 auto;
				float: none;
			}

			.servicesText {
				float: none;
				width: 80%;
			}

			form .form_attachment {
				float: none;
			}

			form .btnSubmit {
				float: none;
				position: relative;
				margin-top: 30px;
			}

			.footerLogo {
				margin-top: 40px;
				margin-bottom: 0;
				width: 100%;
				padding: 0 50px 0 15px;
				float: none;
			}

			.footerContent1, .footerContent2 {
				width: 90%;
				margin-top: 30px;
				margin-bottom: 0;
				width: 100%;
				padding: 0 40px 0 15px;
				float: none;
			}

			.footerContent3{
				margin-top: 30px;
				margin-bottom: 40px;
				width: 90%;
				padding: 0 40px 0 15px;
				float: left;
			}

			.scrollTop  {
				margin-top: 32px;
				margin-bottom: 0;
				width: 10%;
				padding-right: 15px;
				float: right;
			}

			.footerContent1 h3, .footerContent2 h3, .footerContent3 h3 {
					font-family: 'DINProBold';
					font-size: 1.4em;
					line-height: 2em;
			}

			.footerContent1 p, .footerContent2 p, .footerContent3 p {
					font-family: 'DINProRegular';
					font-size: 1.4em;
					line-height: 1.2em;
			}
			/*end about*/

			/*portfolio1*/
			.portfolio1 {
				display: none;
			}

			.m_portfolio1Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio1Section1 img {
				width: 100%;
			}

			.portfolio1Content {
				width: 80%;
				margin: 60px auto
			}

			.folio1_item1 img {
				width: 85%;
				margin: -16% auto 0 auto;
			}

			.folio1_item2 img {
				width: 80%;
			}

			.folio1_item3 img {
				width: 80%;
			}
			/*end portfolio1*/

			/*portfolio2*/
			.portfolio2 {
				display: none;
			}

			.m_portfolio2Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio2Section1 img {
				width: 100%;
			}

			.portfolio2Section1 img {
				width: 80%;
				margin: 30px auto;
			}

			.portfolio2Section2 img {
				width: 100%;
			}

			.portfolio2Section3 img {
				width: 80%;
			}

			.portfolio2Section4 {
				display: none;
			}

			.m_portfolio2Section4 {
				display: block;
			}

			.m_portfolio2Section4 img {
				width: 100%;
			}
			/*end portfolio2*/

			/*portfolio3*/
			.portfolio3 {
				display: none;
			}

			.m_portfolio3Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio3Section1 img {
				width: 100%;
			}
		/*end of portfolio3*/

		/*portfolio4*/
			.portfolio4 {
				display: none;
			}

			.m_portfolio4Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio4Section1 img {
				width: 100%;
			}

			.portfolio4Section2 img {
				width: 90%
			}
			/*end of portfolio4*/

			/*portfolio5*/
			.portfolio5 {
				display: none;
			}

			.m_portfolio5Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio5Section1 img {
				width: 100%;
			}

			.portfolio5Section1 img {
				width: 90%;
			}

			.portfolio5Section2 img {
				width: 100%;
			}
			/*end portfolio5*/

			/*portfolio6*/
			.portfolio6 {
				display: none;
			}

			.m_portfolio6Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio6Section1 img {
				width: 100%;
			}

			.portfolio6Section1 img {
				width: 90%;
			}

			.portfolio6Section2 img {
				width: 100%;
			}
			/*end portfolio6*/

			/*contact*/
			.contactContent {
				display: inline-block;
				position: relative;
				top: 0;
				left: 0;
				transform: none;
			}

			.coffeeCup {
				text-align: center;
				width: 100%;
				padding-top: 50px;
				margin-bottom: 40px;
			}

			.coffeeCup img {
				width: 50%;
			}

			.namecard {
				margin-bottom: 40px;
				width: 100%;

			}

			.namecardContent {
				margin: 0 auto;
			}

			.map {
				float: none;
				text-align: center;
				width: 100%;
				margin-left: 2%;
				margin-top: 50px;
				margin-bottom: 30px;
			}

			.map img {
				width: 70%;
			}

			.namecardContent {
				width: 300px;
			}

			/*end contact*/
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

		.header {
			background: #fff;
			position: relative;
			height: 100px;
		}

		.header.portfolio_header {
			background: rgba(255, 255, 255, 0.3);
		}

		.contactContent {
			display: inline-block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			padding: 50px;
		}

		.coffeeCup {
			float: right;
			width: 60%;
			margin-bottom: 0;
			padding-top: 100px;
		}

		.coffeeCup img {
			width: 45%;
			padding-top: 10px;
		}

		.namecard {
			float: right;
			width: 60%;
			margin-bottom: 0;
			padding-bottom: 120px;
		}

		/*.namecardContent {
			width: 350px;
			height: 200px;
			background: #fff;
			box-shadow: 1px 1px 10px rgba(85, 85, 85, 0.5);
			left: 0;
			margin-left: 0;
		}*/


		.map {
			float: left;
			width: 40%;
			text-align: center;
			padding: 100px 5px 100px 0;
			height: auto;
			position: relative;
			margin-left: 0;
			margin-top: 40px;
			margin-bottom: 0;
		}

		.map img {
			width: 100%;
		}

}

/* iPhone 6+ */
/* Portrait and Landscape */
@media only screen
	and (min-device-width: 414px)
	and (max-device-width: 736px)
	and (-webkit-min-device-pixel-ratio: 3) {
			.mobile_work.footer {
				display: block;
			}

			.mobile_header {
				display: block;
			}

			.workList a div {
				background: rgba(60, 213,46,0.8);
				width:auto;
				height: auto;
				left: 0;
				text-align: center;
				font-size: 3em;
				color: #fff;
				padding: 10px 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.workList a:hover div {
				left: 50%;
			}

			.landing #videoBg {
				display: none;
			}
			
			.landing #videoBg-1 {
	    display: block;
	    width: 100%;
	    height:auto;
	}

			.landing {
				background: url(../images/) center center no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				width: 100%;
			}

			.logo {
				display: none;
			}

			.mobileLogo {
				display: block;
				margin: 25px 0 0 25px;
				float: left;
				z-index: 1000;
			}

			.header {
				background: #fff;
				position: relative;
				height: 100px;
			}

			.header.portfolio_header {
				background: rgba(255, 255, 255, 0.3);
			}

			.workList.active {
				width: 100%;
				padding-top: 85px;
			}

			.workList_Content.active {
				display: none;
			}

			.demo {
				display: none;
			}

			.navContent {
				left: 0;
				margin: 0 auto;
				top: 0;
				width: 350px;
				text-align: right;
				padding-right: 0;
				display: inline-block;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			/*about*/
				.aboutLogo {
					background: url(../images/aboutmobile1.jpg) center center no-repeat;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
					width: 100%;
				}

				.aboutContent {
					padding: 5% 10%;
				}

				.arrowScroll {
					display: none;
				}

				h1.fixedAbout {
						left: 10%;
						font-size: 9vw;
				}

				.aboutContent h1 {
					font-size: 9vw;
				}

				.aboutContent h2 {
					font-size: 4vw;
				}

				.servicesImage {
					margin: 0 auto;
					float: none;
				}

				.servicesText {
					float: none;
					width: 80%;
				}

				form .form_attachment {
					float: none;
				}

				form .btnSubmit {
					float: none;
					position: relative;
					margin-top: 30px;
				}

				.footerLogo {
					margin-top: 40px;
					margin-bottom: 0;
					width: 100%;
					padding: 0 50px 0 15px;
					float: none;
				}

				.footerContent1, .footerContent2 {
					width: 90%;
					margin-top: 30px;
					margin-bottom: 0;
					width: 100%;
					padding: 0 40px 0 15px;
					float: none;
				}

				.footerContent3{
					margin-top: 30px;
					margin-bottom: 40px;
					width: 90%;
					padding: 0 40px 0 15px;
					float: left;
				}

				.scrollTop  {
					margin-top: 32px;
					margin-bottom: 0;
					width: 10%;
					padding-right: 15px;
					float: right;
				}

				.footerContent1 h3, .footerContent2 h3, .footerContent3 h3 {
						font-family: 'DINProBold';
						font-size: 1.4em;
						line-height: 2em;
				}

				.footerContent1 p, .footerContent2 p, .footerContent3 p {
						font-family: 'DINProRegular';
						font-size: 1.4em;
						line-height: 1.2em;
				}
			/*end about*/

			/*portfolio1*/
				.portfolio1 {
					display: none;
				}

				.m_portfolio1Section1 {
					display: block;
					/*margin-top: 85px;*/
				}

				.m_portfolio1Section1 img {
					width: 100%;
				}

				.portfolio1Content {
					width: 80%;
					margin: 60px auto
				}

				.folio1_item1 img {
					width: 85%;
					margin: -16% auto 0 auto;
				}

				.folio1_item2 img {
					width: 80%;
				}

				.folio1_item3 img {
					width: 80%;
				}
			/*end portfolio1*/

			/*portfolio2*/
				.portfolio2 {
					display: none;
				}

				.m_portfolio2Section1 {
					display: block;
					/*margin-top: 85px;*/
				}

				.m_portfolio2Section1 img {
					width: 100%;
				}

				.portfolio2Section1 img {
					width: 80%;
					margin: 30px auto;
				}

				.portfolio2Section2 img {
					width: 100%;
				}

				.portfolio2Section3 img {
					width: 80%;
				}
				.portfolio2Section4 {
					display: none;
				}

				.m_portfolio2Section4 {
					display: block;
				}

				.m_portfolio2Section4 img {
					width: 100%;
				}
			/*end portfolio2*/

			/*portfolio3*/
				.portfolio3 {
					display: none;
				}

				.m_portfolio3Section1 {
					display: block;
					/*margin-top: 85px;*/
				}

				.m_portfolio3Section1 img {
					width: 100%;
				}
			/*end of portfolio3*/

			/*portfolio4*/
				.portfolio4 {
					display: none;
				}

				.m_portfolio4Section1 {
					display: block;
					/*margin-top: 85px;*/
				}

				.m_portfolio4Section1 img {
					width: 100%;
				}

				.portfolio4Section2 img {
					width: 90%
				}
			/*end of portfolio4*/

			/*portfolio5*/
			.portfolio5 {
				display: none;
			}

			.m_portfolio5Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio5Section1 img {
				width: 100%;
			}

			.portfolio5Section1 img {
				width: 90%;
			}

			.portfolio5Section2 img {
				width: 100%;
			}
			/*end portfolio5*/

			/*portfolio6*/
			.portfolio6 {
				display: none;
			}

			.m_portfolio6Section1 {
				display: block;
				/*margin-top: 85px;*/
			}

			.m_portfolio6Section1 img {
				width: 100%;
			}

			.portfolio6Section1 img {
				width: 90%;
			}

			.portfolio6Section2 img {
				width: 100%;
			}
			/*end portfolio6*/

			/*contact*/
			.contactContent {
				display: inline-block;
				position: relative;
				top: 0;
				left: 0;
				transform: none;
			}

			.coffeeCup {
				text-align: center;
				width: 100%;
				padding-top: 50px;
				margin-bottom: 40px;
			}

			.coffeeCup img {
				width: 50%;
			}

			.namecard {
				margin-bottom: 40px;
				width: 100%;

			}

			.namecardContent {
				margin: 0 auto;
			}

			.map {
				float: none;
				text-align: center;
				width: 100%;
				margin-left: 2%;
				margin-top: 50px;
				margin-bottom: 30px;
			}

			.map img {
				width: 70%;
			}

			.namecardContent {
				width: 300px;
			}

			/*end contact*/
}

.play-btn-position {
	top: 0px;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
}

.play-btn {
	width: 86px;
	height: 54px;
	text-align: center;
	left: -1%;
}

@media only screen
	and (min-width: 951px)
	and (max-width: 1299px) {
		.socialIcon1 img {
			width: 80%;
		}
		
		.socialIcon1 {
			padding: 0 5px;
		}
		
		.socialIcon {
			padding-right: 2px;
		}
}

/* iPad size */
/* Portrait and Landscape */
@media only screen
	and (min-width: 681px)
	and (max-width: 1200px) {
	.servicesText li {
		font-size: 1.6vw;
	}
	
	
}

@media (max-width: 1674px) {
	
	.play-btn {
		top: 38%;
	}
	
}

@media (min-width: 1675px) {
	
	.play-btn {
		top: 45%;
	}
	
}

@media (max-width: 1469px) {
	
	.play-btn {
		width: 86px;
		height: 54px;
		top: 36%;
	}
	
}

@media  (max-width: 950px) {
	
	.play-btn {
		width: 63px !important;
		height: 39px;
		top: 43%;
	}
}

@media (max-width: 870px) {
	
	.play-btn {
		top: 36%;
	}
	
}

@media only screen and (max-width: 1200px) {
	.portfolio5Section3_content1 p {
		margin-bottom: 10px;
		font-size: 1.2vw;
		line-height: 1.3vw;
		letter-spacing: 0.015em;
	}
	.portfolio6Section3_content p {
		margin-bottom: 10px;
		font-size: 1.2vw;
		line-height: 1.3vw;
		letter-spacing: 0.015em;
	}
}
@media only screen and (max-width: 750px) {
	.portfolio5Section3_content1 p {
		margin-bottom: 5px;
		font-size: 1.8vw;
		line-height: 1.6vw;
		letter-spacing: 0.015em;
	}
	.portfolio5Section3_content1 {
		bottom: 6%;
		left: 7%;
		padding: 0% 1% 1% 2%;
		width: 86%;
	}
	.portfolio6Section3_content p{
		margin-bottom: 5px;
		font-size: 1.8vw;
		line-height: 1.6vw;
		letter-spacing: 0.015em;
	}
	.portfolio6Section3_content {
		top: 5%;
		left: 7%;
		padding: 1% 1% 1% 2%;
		width: 86%;
	}
}
@media only screen and (max-width: 375px) {
	.portfolio5Section3_content1 p {
		margin-bottom: 5px;
		font-size: 1.9vw;
		line-height: 1.6vw;
		letter-spacing: 0.015em;
	}
	.portfolio5Section3_content1 {
		bottom: 5%;
		left: 4%;
		padding: 0% 1% 1% 2%;
		width: 92%;
	}
	.portfolio6Section3_content p {
		margin-bottom: 5px;
		font-size: 1.9vw;
		line-height: 1.6vw;
		letter-spacing: 0.015em;
	}
	.portfolio6Section3_content {
		top: 5%;
		left: 4%;
		padding: 0% 1% 1% 2%;
		width: 92%;
	}
}

/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
}


/* arcasia video popup */
.pagevd {
	position: relative;
    height:95%;
}

.popupvd {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popupvd .popupvd {
    opacity:1;
    visibility: visible;    
}

.popupvd > iframe {
    position: relative;
    top:100px;
}

/* background dotted */
/*.dotm-overlay {*/
/*  background: url(../images/dotted.png) repeat;*/
/*  width: 100%;*/
/*  height: 1000px;*/
/*}*/