/*-- Lizphere 2016 main style sheet--*/

* {margin: 0;}
html, body {
	height: 100%;
	font-family: 'asapregular', Arial, sans-serif;
}
.container{
    min-height: 100%;
	height: auto !important;
	height: 100%;
    width:100%;
    margin-left:auto;margin-right:auto;
    position:relative;
    background-color: #00686b;
    /*padding: 0 20px;*/	
}

/* Defaults for links*/	
a{
    text-decoration:none;
    color:#3ac0cb;}
a:focus {
    outline:0px dotted #00FFCC;}
a:hover {
    /*background-color:#bde5e1;*/
	background-color: #3ac0cb;
	color:#FFFFFF;
	}
a img{
    border:0px;
}

/*homepage*/
.text_semibold{	
	font-family: 'asapmedium', Arial, sans-serif;
}
.main_copy h1, .s5 h3, .portfolio_title h1{
	font-family: 'Pompiere', Helvetica, cursive;
}
::-moz-selection { 
	background-color: #23af94; 
	color: #ffffff;
}
::selection {
background-color: #23af94;
color: #ffffff;
}
.nav ul{
	list-style: none;
}
.nav li{
	float: left;
	padding: 10px 20px;
}
#nav, .nav_portfolio, .s2 h3, .s3 h3{
	font-family: 'oxygenregular', Arial, sans-serif;
	}
.s1_content{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	}	
.header #topLogo a:hover{
	background-color:transparent;
	}
.main_copy h1{
	color:#0092ff;
	font-weight: 300;
	}	
.s2 h3,  .s4 h3 {
	font-weight:200;
	color: #FFFFFF;
	padding: 50px 0 30px 0;
	letter-spacing: 0.1em;
	font-size: 24px;
	}

/*== Work filter menu ==*/
.filterButtons{
	font-family: 'asapregular', Arial, sans-serif;
	padding-bottom: 5px;
}
.filterButtons a{
	display: inline-block;
	padding: 10px;
	color: #3ac9c9;
}
.filterButtons a:hover{
	cursor: pointer;
	background-color: #0a8989;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #49fcea;
}
.active {
	color: #fff !important;
	border-bottom: 2px solid #FFFFFF;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
/*-- portfolio : movie control --*/
.playButton{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		opacity: 0.7!important;
		font-weight: 300!important;
		letter-spacing: 0.03em;
		background-color: #333333!important;
}
/*== End of work filter menu ==*/

.s3{
	text-align: center;
	background-color: #e2fbf0;
	color: #727672;
	font-family: 'asapregular', Arial, sans-serif;
	background-image: url(../image/background/brilliant.png);	
}
.s3 h3{
	color: #0a9e90;
	font-weight:200;
	padding: 50px 0 30px 0;
	letter-spacing: 0.1em;
	font-size: 24px;
	padding: 50px 0 30px;
}
.about_t1{
		font-size: 34px;
		font-weight: 100;
		font-family: 'Pompiere', Helvetica, cursive;
}
.s4{
	text-align: center;
	/*background-color: #717571;*/	
	position: relative;
	background-image: url('../image/background/img-pattern-1.jpg');
	-moz-box-shadow:    inset 0 0 10px #2d382d;
	-webkit-box-shadow: inset 0 0 10px #2d382d;
	box-shadow:         inset 0 0 10px #2d382d;
	}
.s4_content{
	width: 90%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	}
	
/*-flex slider --*/
.flex-control-nav {
	width: 100%;
	position: relative;
	bottom: auto;
	text-align: center;
	padding: 0px;
}
.flex-control-nav li {
	margin: 0 6px;
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: middle;
}
.flex-control-paging li a {
	width: 11px;
	height: 11px;
	display: block;
	background: #ddd;
	background: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	text-indent: -9999px;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.flex-control-paging li a:hover {
	background: #666;
	background: rgba(0, 0, 0, 0.5);
}
.flex-control-paging li a.flex-active {
	background: #333;
	background: rgba(0, 0, 0, 0.7);
	cursor: default;
}
.custom-navigation {
    display: table;
    width: 80%;
	margin-left: auto;
	margin-right: auto;
    table-layout: fixed;
	position: relative; 
	z-index: 1;
	/*background-color: lightgreen;
	top: 1.1em;*/
	font-size: 14px;
}
.custom-navigation > * {
    display: table-cell;
}
.custom-navigation > a {
    width: 50px;
}
.custom-navigation .flex-next {
      text-align: right;
}
.custom-navigation .flex-prev {
      text-align: left;
}	
.s5{
	text-align: center;
	background-color: #d9fcfb;
	color: #727672;
	clear: both;
	background-image: url('../image/background/img-pattern-4.png');
	padding-top: 50px;
	font-size: 18px;
}
.s5_content{
		width: 90%;
		padding-top: 30px;
		margin-left: auto;
		margin-right: auto;
}
.aboutTable{
		height: 25px;
		background-color: #825c3a;
		background-image: url('../image/background/img-brown-stripe.png');
		border-top: 4px solid #634125;
}
.footer_bar{
		text-align: center;
		background-color:#189690;
		position: relative;
}

/*portfolio section */
#nav, .nav_portfolio{
		font-size: 16px;
		letter-spacing: 0.05em;
}
.portfolio_topTitle{
		position: relative;
		padding: 25px;
		display: none;
}
.s3_portfolio{
		background-color: #585953;
		padding: 20px 0px;
		position: relative;
		color: #fff2df;
		font-size: 14px;
		border: 1px solid #4f4f4c;
		clear: both;
}
.contact_bar{
		background-color: #278184;
		background-image: url(../image/background/brilliant.png);	
}	
.contact_bar_content a, .portfolio_copy a{
		color:#99ffeb;
}
.contact_bar_content a:hover{
		background-color:#00686b;
		color:#49fcea;
}
.portfolio_copy a:hover{
		background-color:#01514f;
}
.contact_bar_content .contact_s_right .logo_footer:hover {
		background-color: transparent;
}
.contact_s_right ul{
		padding-left: 0px;
}
.contact_s_right li{
		list-style: none;
}
.s3_portfolio_content{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
}
.s3_portfolio_content a{
		color: #8c8c85;
}
.s3_portfolio_content a:hover{
		color: #d0d3ba;
		background-color: transparent;
		border-bottom: 1px solid #d0d3ba;
}
.portfolio_desc_title{
		color: #0a9e90;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		font-family: 'oxygenregular', Arial, sans-serif;
		font-weight: 100;
}
.topicTitle{
		text-transform: uppercase;
		font-size: 13px;
		color: #1ba591;
		padding-bottom: 5px;
}
.portfolio_line_audit_q2{
		clear: both;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		color: #1ba591;
		padding-bottom: 120px;
}
.portfolio_line_audit_q2 table, .portfolio_line_userflows table{
		text-align: center;
		margin-left: auto;
		margin-right: auto;
}
.portfolio_line_userflows{
		clear: both;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		color: #1ba591;
		padding-bottom: 75px;
}
.portfolio_row_line_short hr{
		border: 1px solid #189690;
}

/* --- For desktop --- */
@media screen and (min-width: 600px)  {
	
	.s1{
		text-align: center;
		background-color: #ECF6EC;
		background-image: url('../image/img-workdesk.png');
		background-position: center center;
		background-repeat: no-repeat;
	}
	.s1{
		height: 625px;
	}
	.s1_content .main_copy{
		clear: both;
	}
	.main_copy{
		font-size: 20px;
		position: relative;
		top: 220px;
	}
	.main_copy h1{
		/*color:#049299;*/	
		font-size:55px;
	}
	.main_copy p{
		/*color:#00A5B2 ;*/
		color:#727672;
		line-height: 1.7em;
	}
	.mobile_nav{
		display: none;
	}
	
	/*== Sticky menu ==*/	
	#nav{
		float: right;
	}
	.navHeader{
		background-color: #dff4e9;
		/*background: rgba(223, 244, 233, 0.8);*/
	}
	.navHeader ul{
		list-style:none;
	}
	.nav a:hover{
		color: #00a5b2;
		background-color: transparent;
		border-bottom: 2px solid #00a5b2;
	}
	.activeMenu{
		border-bottom: 2px solid #00a5b2;
		color: #00a5b2;
	}
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/*background: #ECF6EC;*/
		color:#fff;
		z-index: 1000;
		height: 140px;
		overflow: hidden;
		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
		transition: height 0.3s;
		text-align:center;
		line-height:120px;
	}
	.headerContent{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.header.shrink {
		height: 80px;
		line-height:60px;
		/*background: #F8FFF5;*/
		background: #dff4e9;
		-moz-box-shadow:    0px 0px 6px 1px #c4c4c4;
		-webkit-box-shadow: 0px 0px 6px 1px #c4c4c4;
		box-shadow:         0px 0px 6px 1px #c4c4c4;
	}
	.header li{
		font-size:16px;
		font-weight:normal;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	.header.shrink li{
		font-size:15px;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	.header #topLogo{
		float: left;
		position: relative;
		top: 10px;
	}
	.header img{
		vertical-align: middle;
	}
	.header.shrink img{
		/*width: 70px;*/
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
		vertical-align: middle;
		/* For new logo */
		width:60px;
		position: relative;
		top:-2px;
	}
	.header.shrink #topLogo a:hover {
		background-color:transparent;
	}
	.header  #topLogo .activeMenu{
		border: none;
	}
	/*== End of sticky menu ==*/
	
	
	/*== Porfolio pages == */
	
	.s1.portfolio{
		background-image: none;
		background-color: #00686b;
		height: 100%;
	}
	
	/* == Menu for portolio pages == */
	.nav_portfolio{
		padding-left: 2%;
	}
	.main_copy.portfolio h1{
		font-size: 42px;
	}
	.header_note{
		float: right !important;
		color: #a5d6b9;
		font-family: "oxygenregular",Arial,sans-serif;
		font-size: 11px !important;
		letter-spacing: 0.3em;
		text-transform: uppercase;
		padding-right: 0px !important;
	}
	/* == End of menu for portfolio pages ==*/
	
	/*
	.shrink .nav_portfolio img{
		width: 15%;
		position: relative;
		vertical-align: middle;
		top:-2px;
		padding-left: 3%;
		padding-right: 0px;
	*/
	.shrink .nav_portfolio img {
		left: 3px;
		position: relative;
		vertical-align: middle;
		width: 4%;
	}
	.portfolio .header.shrink{
		-moz-box-shadow:    0px 0px 6px 1px #444444;
		-webkit-box-shadow: 0px 0px 6px 1px #444444;
		box-shadow:         0px 0px 6px 1px #444444;
	}
	.main_copy.portfolio{
		position: relative;
		top: 0px;
		padding: 6% 0% 3%;
	}
	.portfolio_topTitle p{
		font-family: 'oxygenregular', Arial, sans-serif;
		color:#11897d;
		font-size: 12px;
		letter-spacing: 0.3em;
		text-transform: uppercase;
	}
	.portfolio_topTitle hr{
		color:#1ba591;
		width: 20%;
		text-align: center;
		opacity: 0.5;
	}
	.portfolio_title{
		position: relative;
		padding-top: 4.5%;
	}
	.portfolio_title h1{
		color: #FFFFFF;
	}
	.portfolio_title p{
		padding-top: 0.5%;
		color:#acd663;
		font-size: 18px;
	}
	/*== End Porfolio pages ==*/
	
	
	.s2{
		text-align: center;
		background-color: #00686b;
		padding-top: 50px;
	}
	.sticky{
		display: block;
		background-color: red;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.sticky #topLogo{
		background-color: blue;
	}
	.unsticky{
		display: block;
	}
	
	
	/*
	#topLogo{
		float: left;
	}*/
	
	/* homepage portfolio section */
	#workFilter .mix{
	display: none;
	}
	.work-mobile-inst{
		display: none;
	}
	.grid {
		padding: 20px 20px 80px 20px;
		max-width: 1024px;
		margin: 0 auto;
		list-style: none;
		text-align: center;
		/*background-color: blue;*/
	}
	.grid li {
		display: inline-block;
		/*width: 300px;
		background-color: green;*/
		margin: 0;
		padding: 15px 15px 25px 15px;
		text-align: left;
		position: relative;
	}
	.grid figure {
		margin: 0;
		position: relative;
		/*background-color: lightblue;*/
		border:3px double #038783;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.grid figure:hover{
		-moz-box-shadow:    0 0px 8px 5px #024743;
		-webkit-box-shadow: 0 0px 8px 5px #024743;
		box-shadow:         0 0px 8px 5px #024743;
	}
	.filterType{
		position: relative;
		top: 10px;
		color: #1ba591;
		text-align: center;
	}
	.grid figure img {
		max-width: 100%;
		display: block;
		position: relative;
	}
	.grid figcaption {
		position: absolute;
		top: 0;
		left: 0;
		/*padding: 10px;*/
		background: #054242;
		color: #6debf2;
		-moz-box-shadow:    0 0px 8px 2px #444444;
		-webkit-box-shadow: 0 0px 8px 2px #444444;
		box-shadow:         0 0px 8px 2px #444444;
	}
	.grid figcaption h3 {
		margin: 0;
		padding: 19px 14px 8px;
		color: #fff;
		font-size: 16px;
		letter-spacing: 0.05em;
		line-height: 1.2em;
	}
	.grid figcaption h3.twolines{
		padding: 12px 14px 8px;
	}
	.grid figcaption span{
		padding: 0 14px;
		font-size: 14px;
	}
	
	/*
	.grid .circle{
		width: 20px;
		height: 28px;
		font-family: 'oxygenregular', Arial, sans-serif;
	}
	.grid figcaption span:before {
		content: 'Type: ';
	}*/
	
	.grid figcaption a {
		text-align: center;
		padding: 5px 0px;
		/*
		-moz-border-radius: 50%;
		border-radius: 50%;
		background: #55dbff;*/
		display: inline-block;
		color: #fff;
	}
	.grid figcaption a.goTo{
		background-image:url('../image/icon/img-greenCircle.png');
		background-repeat: no-repeat;
		background-size: 38px;
		position: absolute;
		right: 14px;
		top: 26px;
		width: 38px;
		height: 38px;	
	}
	.grid figcaption a.goTo:hover{
		clear: both;
		background-image:url('../image/icon/img-greenCircle-hover.png');
		background-color: transparent;
	}
	.grid figcaption a:hover{
		background-color: transparent;	
	}
	.circle img{
		transform: none!important;
	}
	
	/* Caption Style 3 */
	.cs-style-3 figure {
		overflow: hidden;
	}
	.cs-style-3 figure img {
		-webkit-transition: -webkit-transform 0.4s;
		-moz-transition: -moz-transform 0.4s;
		transition: transform 0.4s;
	}
	.no-touch .cs-style-3 figure:hover img,
	.cs-style-3 figure.cs-hover img {
		-webkit-transform: translateY(-50px);
		-moz-transform: translateY(-50px);
		-ms-transform: translateY(-50px);
		transform: translateY(-50px);
	}
	.cs-style-3 figcaption {
		height: 90px;
		width: 100%;
		top: auto;
		bottom: 0;
		opacity: 0;
		-webkit-transform: translateY(100%);
		-moz-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
		-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
		transition: transform 0.4s, opacity 0.1s 0.3s;
	}
	.no-touch .cs-style-3 figure:hover figcaption,
	.cs-style-3 figure.cs-hover figcaption {
		opacity: 1;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
		-moz-transition: -moz-transform 0.4s, opacity 0.1s;
		transition: transform 0.4s, opacity 0.1s;
	}
	.cs-style-3 figcaption a {
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
	/* End Caption Style 3 */
	
	
	/* S2 portfolio */
	
	.s2.portfolio{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio_copy, .portfolio_tool{
		width: 65%;
		margin-left: auto;
		margin-right: auto;
		color: #1bdbb6;
		padding: 50px 20px 120px;
		line-height: 1.5em;
	}
	#portfolio-img-mulan, .portfolio-img-ws{
		width: 60%;
	}
	#portfolio-img-print{
		width: 55%;
	}
	#portfolio-img-datascience, #portfolio-img-airbnb, #portfolio-img-2014, #portfolio-img-seo-infographic{
		width:70%;
	}
	.portfolio-img-userflow{
		width:100%;
	}
	.ws-small{
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	.ws-small-sizer{
		width: 50%;
	}
	.portfolio-img-ws-s, .ws-small-item{
		width: 50%;	
	}
	#portfolio-img-planPg{
		width: 100%;
		padding-bottom: 50px;
	}
	#portfolio-img-seo-infographic-2{
		width: 45%;
		-moz-box-shadow:     0 0 6px 2px #074f4f;
		-webkit-box-shadow:  0 0 6px 2px #074f4f;
		box-shadow:          0 0 6px 2px #074f4f;
	}
	.portfolio-img-BOT{
		width:70%;
	}
	.portfolio-img-BOT-s{
		width:45%;
	}
	.portfolio-img-siteAudit{
		width: 50%;
	}
	.portfolio-img-dashboard{
		width: 65%;
	}
	.portfolio-img-dash{
		width: 100%;
		border-radius: 5px;
		-moz-border-radius:5px;
	}
	.portfolio-img-dash-2{
		width: 85%;
		border-radius: 5px;
		-moz-border-radius:5px;
	}
	.portfolio-img-dash-3{
		width: 75%;
		border-radius: 5px;
		-moz-border-radius:5px;
	}
	.portfolio-img-dash-3-mobile{
		display: none;
	}
	.image-caption{
		font-size: 14px;
		color: #1ba591;
		padding-bottom: 20px;
		padding-top: 5px;
		line-height: 1.4em;
	}
	.BOT-small{
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio-left-column{
		float: left;
		/*padding-left: 5%;
		padding-bottom: 120px;*/
		width: 45%;
		
		padding-left: 5%;
		text-align:right;
		color:#1bdbb6;
		line-height: 1.5em;
		}
	.portfolio-left-column.audit{
		text-align: left;
	}
	.portfolio-img-column-mobile{
		display: none;
	}
	.row_padding{
		padding-bottom: 135px;
	}
	.portfolio-row{
		clear: both;
	}
	.topicTitle{
		text-transform: uppercase;
		font-size: 13px;
		color: #1ba591;
		padding-bottom: 5px;
	}
	.portfolio_copy_right{
		float: right;
		padding-right: 2%;
		position: relative;
		text-align: left;
		width: 45%;
		color: #1bdbb6;
		line-height: 1.5em;
	}
	.portfolio_copy.siteaudit{
		padding-bottom: 0px;
		clear: both;
	}
	.portfolio_copy.userFlow_summary {
		padding-top: 0px;
	}
	.portfolio-img-siteAudit-s{
		width: 100%;
		border: 2px solid #038783;
		border-radius: 5px;
		-moz-border-radius :5px;
		box-shadow: 0px 0px 8px #005557;
		-moz-box-shadow:    0 0px 8px #005557;
		-webkit-box-shadow: 0 0px 8px  #005557;
	}
	.portfolio_row_line{
		width: 75%;
		clear: both;
		margin-bottom: 50px;
		border: 1px solid #189690;
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio_row_line.userflow_line{
		margin:65px auto 70px;
	}
	.portfolio_row_line_short{
		width: 38%;	
	}
	.portfolio_audit_quote{
		font-size: 18px;
		font-weight: 100;
		font-family: "oxygenregular",Arial,sans-serif;
		letter-spacing: 1px;
	}
	.portfolio_line_audit_q2 td, .portfolio_line_userflows td{
		padding: 0 15px;
	}
	.portfolio_line_userflows td.portfolio_row_line_short{
		width: 35%;
	}
	.portfolio_tool{
		clear: both;
	}
	.portfolio-dashboard-2img td{
		padding: 10px;
		width: 45%;
	}
	.contentTitle{
		font-size: 22px;
		letter-spacing: 0.04em;
		font-family: "oxygenregular",Arial,sans-serif;
		color: #21f7ce;
	}
	.contentTitle.siteAudit{
		font-size:18px;
	}
	.contentTitle.userFlow{
		font-size:18px;
		padding-bottom: 20px;
	}
	.portfolio_copy.dashboard-pg{
		width: 100%;
		padding-top: 70px;
	}
	.portfolio_row_line.dashboard-pg{
		margin: 40px 0px 60px 0px;
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio-dashboard-2img{
		padding: 50px 0px 30px 0px;
	}
	.portfolio_line_audit_q2.wallieShelf{
		padding-bottom: 30px;
		padding-top: 65px;
	}
	.my-slider{
		position: relative;
		margin-top: 65px;
	}
	.unslider{
		position: relative;
	}
	.unslider-nav{
		overflow: hidden;
		position: absolute;
		top: 0px;
		left: 42%;
	}
	.unslider-nav ol{
		text-align: center;
	}
	.unslider-nav li{
		display: inline-block;
		padding: 10px 20px!important;
		cursor: pointer;
		color: #3ac9c9;
	}
	.unslider-nav li:hover{
		background-color: #0a8989;
		border-radius: 5px;
		color: #49fcea;
	}
	.unslider-nav li.unslider-active{
		color: #ffffff;
		border-bottom: 2px solid #FFFFFF !important;
	}
	.contact_s_left{
		
		width: 60%;
		border-right: 1px solid #189690;
		line-height: 1.5em;
		position: relative;
		font-size: 14px;
	}
	.contact_s_left div{
		float: left;
	}
	.contact_s_left_img{
		width: 20%;
		padding-right: 20px;
	}
	.contact_s_left_copy{
		position: relative;
		width: 72%;
		top: 1em;
	}
	.about_t2{
		font-size: 24px;
		font-weight: 100;
		font-family: 'Pompiere', Helvetica, cursive;
		color: #ffffff;
	}
	.logo_footer img{
		width: 30%;
		min-width: 40px;
	}
	.about_footer_img{
		width: 100%;
	}
	.contact_s_middle{
		width: 23%;
		line-height: 1.5em;
		border-right: 1px solid #189690;
		text-align: center;
		font-size: 14px;
		padding: 35px 20px 0px;
	}
	.contact_s_middle_t1{
		font-family:'bublina_the_dogregular', Helvetica, sans-serif;
		font-size:24px;
		/*color: #acd663;*/
		color: #ffffff;
	}
	.twocups_footer{
		position: relative;
		top: 6px;
	}
	.contact_s_right{
		text-align: center;
		line-height: 2.5em;
		font-size: 13px;
		text-transform: uppercase;
		position: relative;
		left: 2.5%;
	}
	.portfolio_footer_menu{
		text-align: center;
		padding: 15px;
	}
	.movie_section_mobile{
		display: none;
	}
	.movie_wrapper{
		background-image: url(../image/background/img-movie-background.png);
		background-repeat: no-repeat;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		width: 520px;
	}
	.movie_wrapper_2{
		background-image: url(../image/background/img-movie-background-2.png);
		background-repeat: no-repeat;
		background-position: 0 -3px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		width: 520px;
	}
	.playButton:hover{
		opacity: 0.9!important;
	}
	/*End about s2 portfolio*/
	
	
	/*s3 section */
	.s3{
		padding-top: 50px;
		padding-bottom: 100px;	
	}
	.s3_content{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		font-size: 18px;
		line-height: 1.5em;
	}
	.s3 p{
		line-height: 1.5em;
	}
	.about_left{
		text-align: left;
	}
	.about_right{
		text-align: right;
	}
	.about_right td, .about_left td{
		padding: 15px;
	}
	td.about_table_copy1{
		padding: 0 50px 0 20px;
	}
	td.about_table_copy2{
		padding: 0 20px 0 50px;
	}
	.about_table_img1{
		width: 25%;
		text-align: right;
	}
	.about_table_img2{
		width: 25%;
		text-align: left;
	}
	.about_table_img2-m{
		display: none;
	}
	
	/* S3 portfolio */
	
	.s3_portfolio_content.firstPage{
		padding-bottom: 18px;
	}
	.portfolio_nav_prev{
		text-align: left;
	}
	.portfolio_nav_next{
		position: absolute;
		right: 0px;
		text-align: right;
		top: 0px;
	}
	.p_arrow_next{
		vertical-align: text-top;
		padding-left: 5px;
	}
	.p_arrow_back{
		vertical-align: text-top;
		padding-right: 5px;
	}
	/* End S3 portfolio */

	.s4{
		height: 400px;
		padding-bottom: 4%;
	}
	.s4_left{
		width: 50%;
		height: 100%;
		float: left;
		/*background-color: lightgreen;*/
		line-height: 2em;
		color: #fff2df;
		position: relative;
	}
	.s4_left_content{
		font-size: 18px;
		position: relative;
		top: 40%;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.s4_right{
		width: 50%;
		/*background-color: yellow;*/
		float: right;
		position: relative;
		height: 100%;
	}
	/*
	.s4_quote{
		min-width: 475px;
		padding-bottom: 17%;
		
		background-color: #ffffff;
		background-image: url("../image/background/brilliant.png");
		border-radius: 5px;
		margin-top: 10%;
		padding: 10px 0;
	}*/
	.s4_quote{
		/*background-color: green;*/
		min-width: 503px;
		background-color: #ffffff;
		background-image: url("../image/background/brilliant.png");
		border-radius: 5px;
		padding: 30px 0;
		position: relative;
		top:15%;
		 -moz-box-shadow:   0 0 8px #444444;
		-webkit-box-shadow: 0 0 8px #444444;
		box-shadow:         0 0 8px #444444;
	}
	.s4_quoteBack img{
		width: 98%;
		position: absolute;
		left:2%;
		top:0px;
		max-height: 400px;
		min-width: 475px;
	}
	.flexslider {
		margin: 0px;
		min-width: 390px;
		/*
		margin: 0 0 105px;
		min-height: 250px!important;
		background: #ffffff;
		border: 4px solid #ffffff;
		top: 90px;*/
		position: relative;
		zoom: 1;
		z-index: 1;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		color: #05a1e5;
	}
	.flexslider {
		/*margin-bottom: 10px;*/
	}
	.slides li{
		width: 50%;
	}
	.slides{
		padding-left: 0px;
	}
	.q_author{
		font-family: 'asapitalic', Arial, sans-serif;
		font-size: 17px;
		text-align: right;
		padding-top: 8px;
		color: #33dbc3;
	}
	.q_author_2{
		font-family: 'bublina_the_dogregular', Helvetica, sans-serif;
		font-size: 22px;
		text-align: right;
		padding-top: 8px;
		color: #717571;
	}
	.qv1{
		font-family:'oxygenitalic', Arial, sans-serif;
		color: #0cb14b;
		font-size: 26px;
		margin-top: 2%;
	}
	.qv2{
		font-family: 'bublina_the_dogregular', Helvetica, sans-serif;
		font-size: 36px;
		line-height: 1.2em;
	}
	.q3{
		margin-top: 0.4%;
	}

	.s5 h3{
		font-size: 44px;
		color: #0a9e90;
		font-weight: 300;
		padding: 30px 0 30px;
	}
	.contact_card{
		background-color: #d2f9f4;
		border: 2px solid #aee5dd;
		border-radius :13px;
		-moz-border-radius :13px;
		/*height: 160px;*/
		margin-left: auto;
		margin-right: auto;
		width: 40%;
		line-height: 1.5em;
	}
	.contact_card p{
		position: relative;
		padding: 35px 25px;
	}
	#twocups{
		position: relative;
		bottom: -6px;
		padding-top: 30px;
	}
	.aboutImg{
	}
	.contact_bar_content td{
		/*padding: 15px;*/
		color: #0bd6af;
	}
	.contact_bar_content{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.footer_bar{
		height: 200px;	
	}
	.footer_bar p{
		position: relative;
		font-size: 14px;
		top: 28%;
		color: #4dc4ad;
		line-height: 2em;
	}
	/*portfolio*/
	.footer_bar.portfolio{
		clear: both;
	}
} /*-- end CSS for desktop --*/


/* --- For mobile and tablet -- */
@media screen and (min-width:300px) and (max-width: 599px) {
	.s1{
		text-align: center;
		background-color: #ECF6EC;
		background-image: url('../image/mobile/img-m-workdesk.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 550px;
		height: 550px;
	}
	#logo{
		width: 75px;
	}
	.s1_content{
		padding-top: 10%;
	}
	.main_copy{
		clear: both;
		font-size: 1.1em;
		position: relative;
		padding-top: 40px;	
	}
	.main_copy h1{
		font-size: 2.5em;
	}
	.main_copy p{
		 color: #727672;
		line-height: 1.5em;
	}
	#nav{
		display: none;
	}
	.mobile_nav{
		display: block;
		padding-top: 10%;
		padding-bottom: 25%;
		position: relative;
	}
	.mobile_nav table{
		margin-left: auto;
		margin-right: auto;
	}
	.mobile_nav td{
	}
	.mobile_nav a{
		padding: 10px 20px;
		background-color: #dff4e9;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 1px solid #c3ead4;
	}
	.mobile_nav a:hover{
		background-color: #c3ead4;
		color: #3ac0cb;
	}
	.mobile_nav a:active{
		background-color: #cae8d8;
	}
	
	/* S2 section */
	.s2{
		text-align: center;
		position: relative;
		padding-bottom: 50px;
	}
	.filterButtons{
		display: none;
	}
	.work-mobile-inst{
		display: block;
		color: #1ba591;
		font-size: 0.9em;
	}
	#workFilter li{
		position: relative;
		border: 3px double #038783;
		margin-bottom: 25px;
		-moz-box-shadow:    0 0px 8px 2px #444444;
		-webkit-box-shadow: 0 0px 8px 2px #444444;
		box-shadow:         0 0px 8px 2px #444444;
	}
	.filterType{
		display: none;
	}
	.grid {
		padding-left: 0px;
		list-style: outside none none;
	}
	.grid li {
		min-width: 300px;
	}
	.grid figcaption {
		position: relative;
		background: #0a5654;
		color: #6debf2;
		margin-top: -4px;
		height: 90px;
		text-align: left;
		width: inherit;
		-webkit-box-shadow: inset 0px 16px 30px -10px #023533;
		-moz-box-shadow: inset 0px 16px 30px -10px #023533;
		box-shadow: inset 0px 16px 30px -10px #023533;
	}
	.grid figcaption h3 {
		margin: 0;
		padding: 19px 14px 8px;
		color: #fff;
		font-size: 16px;
		letter-spacing: 0.05em;
		line-height: 1.2em;
	}
	.grid figcaption h3.twolines{
		padding: 12px 14px 8px;
	}
	.grid figcaption span{
		padding: 0 14px;
		font-size: 14px;
	}
	
	/*
	.grid .circle{
		width: 20px;
		height: 28px;
		font-family: 'oxygenregular', Arial, sans-serif;
	}
	.grid figcaption span:before {
		content: 'Type: ';
	}*/
	
	.grid figcaption a {
		text-align: center;
		padding: 5px 0px;
		/*
		-moz-border-radius: 50%;
		border-radius: 50%;
		background: #55dbff;*/
		display: inline-block;
		color: #fff;
	}
	
	.grid figcaption a.goTo{
		background-image:url('../image/icon/img-greenCircle.png');
		background-repeat: no-repeat;
		background-size: 38px;
		position: absolute;
		right: 14px;
		top: 30%;
		width: 38px;
		height: 38px;	
	}
	.grid figcaption a.goTo:hover{
		clear: both;
		background-image:url('../image/icon/img-greenCircle-hover.png');
		background-color: transparent;
	}
	.grid figcaption a:hover{
		background-color: transparent;	
	}
	
	/*s3 section */
	.s3{
		padding-bottom: 20%;	
	}
	.s3_content{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.about_left{
	}
	.about_left td, .about_right td{
		float: left;
	}
	.about_table_img1 img, .about_table_img2-m img{
		width: 45%;
		max-width: 175px;
	}
	td.about_table_copy1{
		line-height: 1.6em;
		padding-top: 9%;
	}
	.s3 a{
		text-decoration: underline;
	}
	.s3_content p{
		line-height: 1.6em;
	}
	.about_right{
		padding-top: 15%;
	}
	.about_table_img2-m, .about_table_img1{
		display: block;
		width: 100%;
	}
	.about_table_img2{
		display: none;
	}
	td.about_table_copy2{
		line-height: 1.6em;
		padding-top: 2%;
	}
	
	
	/*s4 section */
	.s4_content{
		padding: 20% 0px;
	}
	.s4_left {
		color: #fff2df;
		height: 100%;
		line-height: 1.6em;
		position: relative;
	}
	.s4_quote{
		background-color: #ffffff;
		background-image: url(../image/background/brilliant.png);
		padding: 10px 0px;
		margin-top: 10%;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.s4_quoteBack{
		display: none;
	}
	.flexslider{
		padding: 10px 15px;
		color: #05a1e5;
	}
	.custom-navigation{
		top: 0px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.slides{
		padding-left: 0px;
	}
	.qv1{
		font-family:'oxygenitalic', Arial, sans-serif;
		color: #0cb14b;
		font-size: 1.3em;
		margin-top: 1.8%;
	}
	.qv2{
		font-family: 'bublina_the_dogregular', Helvetica, sans-serif;
		font-size: 1.8em;
		line-height: 1.2em;
	}
	.q_author {
		color: #33dbc3;
		font-family: "asapitalic",Arial,sans-serif;
		font-size: 16px;
		padding-top: 8px;
	}
	.q_author_2 {
		color: #717571;
		font-family: "bublina_the_dogregular",Helvetica,sans-serif;
		font-size: 18px;
		padding-top: 15px;
	}
	.flex-control-nav li {
		margin: 0 15px;   
	}
	.flex-direction-nav .flex-prev {
		opacity: 1;
		left: 10px;
	}
  .flex-direction-nav .flex-next {
		opacity: 1;
		right: 10px;
	}
  /* s5 section */
  .s5{
		padding-top: 20%;
	}
  .s5_content{
		padding-top: 0px;
	}
  .s5 h3 {
		color: #0a9e90;
		font-size: 2em;
		font-weight: 300;
	}
	.contact_card{
		line-height: 1.6em;
		font-size: 16px;
		padding-top: 25px;
	}
	.contact_card a{
		text-decoration: underline;
	}
	#twocups {
		bottom: -5px;
		padding-top: 30px;
		position: relative;
		width: 60%;
		max-width: 250px;
	}
  
	.footer_bar p{
		position: relative;
		font-size: 14px;
		padding: 50px 0px;
		color: #4dc4ad;
		line-height: 1.6em;
	}
	
	/*portfolio section*/
	.portfolio .s1_content{
		padding-top: 0px;
		width: 100%;
	}
	.s1.portfolio {
		background-color: #00686b;
		background-image: none;
		height: 100%;
	}
	.portfolio .header.shrink {
	    box-shadow: 0 0 6px 1px #444444;
	}
	.header.shrink {
		background: #dff4e9 none repeat scroll 0 0;
		line-height: 60px;
		width: 100%;
	}
	#topLogo{
		position: relative;
	}
	.portfolio #logo{
		position: relative;
		padding-top:6%;
	}
	.nav_portfolio{
		font-size: 15px;
		z-index: 9999;
	}
	.nav_portfolio .nav{
		padding-left: 0px;
		position: relative;
		background-color:#ecf6ec;
		height: 60px;
	}
	.nav li{
		list-style:  none;
		width: 100%;
		padding:0px;
		border-top: 2px solid #d1e8db;
	}
	.shrink .nav_portfolio img {
		padding-left: 2px;
		padding-right: 0;
		position: relative;
		top: -3px;
		vertical-align: middle;
		width: 9px;
	}
	.header_note{
		display: none;
	}
	.main_copy.portfolio{
		padding-bottom: 20px;
	}
	.main_copy.portfolio h1 {
		font-size: 1.8em;
		color: #FFFFFF;
	}
	.portfolio_title p {
		color: #acd663;
		font-size: 0.8em;
		padding-top: 2%;
	}
	#portfolio-img-mulan, .portfolio-img-ws, #portfolio-img-print,
	#portfolio-img-datascience, #portfolio-img-airbnb, #portfolio-img-2014, #portfolio-img-seo-infographic, .portfolio-img-BOT,
	#portfolio-img-planPg, #portfolio-img-seo-infographic-2{
		width: 85%;
	}
	#portfolio-img-seo-infographic-2 {
		box-shadow: 0 0 6px 2px #074f4f;
	}
	#bBeautyTitle{
		font-size: 1.5em;
	}
	.portfolio-img-BOT-s {
    width: 80%;
	}
	.portfolio-img-userflow{
		width:100%;
	}
	.portfolio-row{
		padding-top: 40px;
	}
	.portfolio_desc_title{
		font-size: 12px;
	}
	.portfolio_copy{
		padding-top: 40px;
	}
	.portfolio_copy, .portfolio_tool, .portfolio_copy_right, .portfolio-left-column {
		color: #1bdbb6;
		line-height: 1.6em;
		margin-left: auto;
		margin-right: auto;
		width: 85%;
		font-size: 0.9em;
	}
	.portfolio_copy_right{
		padding-top: 40px;
	}
	.portfolio_copy.userFlow_summary {
		padding-top: 0px;
	}
	.portfolio_row_line{
		width: 85%;
		border: 1px solid #189690;
		margin-left: auto;
		margin-right: auto;
		margin: 75px auto 35px;
	}
	.portfolio_row_line.userflow_line{
		margin:55px auto 55px;
	}
	.portfolio_row_line.dashboard-pg{
		 margin: 65px auto 35px;
	}
	.portfolio_tool {
		color: #1bdbb6;
		line-height: 1.5em;
		margin-left: auto;
		margin-right: auto;
		padding: 50px 20px 30px;
	}
	.portfolio-img-siteAudit-s.no-mobile{
		display: none;
	}
	.portfolio-img-column-mobile{
		display: block;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		padding: 0px 0px 40px;
	}
	.portfolio_audit_quote {
		font-family: "oxygenregular",Arial,sans-serif;
		font-size: 1.1em;
		font-weight: 100;
		letter-spacing: 1px;
	}
	.ws-small {
		margin-left: auto;
		margin-right: auto;
		width: 80%;
	}
	.ws-small-sizer{
		width: 100%;
	}
	.portfolio-img-ws-s, .ws-small-item {
		width: 100%;
	}
	.portfolio-img-siteAudit {
		width: 85%;
	}
	.portfolio-img-dashboard{
		width: 90%;
	}
	.portfolio-img-dash-3.no-mobile{
		display: none;
	}
	.portfolio-img-dash-3-mobile{
		width: 70%;
		border-radius: 5px;
		-moz-border-radius:5px;
	}
	.portfolio-img-dash, .portfolio-img-dash-2{
		width: 100%;
		border-radius: 5px;
		-moz-border-radius :5px;
	}
	.image-caption{
		font-size: 0.9em;
		color: #1ba591;
		padding-bottom: 20px;
		padding-top: 5px;
		line-height: 1.4em;
	}
	.portfolio-dashboard-2img td {
		display: inline-block;
		padding-bottom: 20px;
	}
	.contentTitle {
		font-family: "oxygenregular",Arial,sans-serif;
		font-size: 16px;
		letter-spacing: 0.04em;
	}
	.row_padding{
		padding-bottom: 40px;
	}
	.my-slider {
		margin-top: 65px;
	}
	.unslider {
		position: relative;
	}
	.unslider-nav {
		left: 22%;
		position: absolute;
		top: 0;
	}
	.unslider-nav ol {
		text-align: center;
	}
	.unslider-nav li.unslider-active {
		border-bottom: 2px solid #ffffff !important;
		color: #ffffff;
	}
	.unslider-nav li {
		color: #3ac9c9;
		cursor: pointer;
		display: inline-block;
		padding: 10px 25px !important;
	}
	.unslider-nav li:hover {
		background-color: #0a8989;
		border-radius: 5px;
		color: #49fcea;
	}
	.topicTitle{
		/*font-size: 14px;*/
		padding-bottom: 10px;
	}
	.portfolio-left-column {
		color: #1bdbb6;
		line-height: 1.5em;	
	}
	.portfolio-left-column.audit {
		width: 85%;
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio-img-siteAudit-s {
		border: 2px solid #038783;
		border-radius: 5px;
		box-shadow: 0 0 8px #005557;
		width: 100%;
	}
	.portfolio-left-column, .portfolio_copy_right {
		color: #1bdbb6;
		line-height: 1.5em;
		position: relative;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio_row_line_short {
		width: 20%;
	}
	.portfolio_line_audit_q2{
		padding: 40px 0px;
	}
	.portfolio_line_userflows{
		text-transform: uppercase;
	}
	.portfolio_line_audit_q2.wallieShelf{
		padding: 30px 0px;
	}
	.mobile_audit_img{
		padding-top: 0px;
	}
	.contentTitle.userFlow{
		font-size:18px;
		padding-bottom: 20px;
	}
	.contentTitle {
		color: #21f7ce;
		font-family: "oxygenregular",Arial,sans-serif;
		font-size: 18px;
		letter-spacing: 0.04em;
	}
	.portfolio_copy.dashboard-pg{
		padding-bottom: 30px;
		font-size: 1em;
	}
	.movie_section{
		display: none;
	}
	.movie_section_mobile{
		display: block;
	}
	.movie_wrapper{
		background-image: url(../image/background/img-movie-background.png);
		background-repeat: no-repeat;
		background-size: 320px 251px;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		width: 300px;
	}
	.movie_wrapper_2 {
		background-image: url("../image/background/img-movie-background-2.png");
		background-position: 0 -3px;
		background-repeat: no-repeat;
		background-size: 320px 257px;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		width: 300px;
	}
	.playButton {
		font-size: 1em !important;
	}
	.playButton:hover {
		opacity: 0.9 !important;
	}
	.portfolio_nav_prev{
		padding-bottom: 40px;
		text-align: center;
	}
	.p_arrow_back {
    padding-right: 5px;
    vertical-align: text-top;
	}
	.portfolio_nav_next{
		text-align: center;
	}
	.p_arrow_next{
		vertical-align: text-top;
		padding-left: 5px;
	}
	.contact_bar_content td{
		float: left;
		text-align: center;
		width: 100%;
	}
	.contact_s_left{
		padding: 15% 0px;
	}
	.contact_s_left a{
		text-decoration: underline;
	}
	.about_footer_img{
		width: 45%;
	}
	.contact_s_left_copy{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		color: #0bd6af;
		line-height: 1.6em;
		padding-top: 40px;
		font-size: 0.9em;
	}
	.about_t2 {
		color: #ffffff;
		font-family: "Pompiere",Helvetica,cursive;
		font-size: 30px;
		font-weight: 100;
	}
	.contact_s_middle{
		background-color: #d9fcfb;
		background-image: url("../image/background/img-pattern-4.png");
		color: #727672;
		padding: 0px;
		border-bottom: 3px solid #0b685d;
		padding: 15% 0 0;
		line-height: 1.6em;
	}
	.contact_s_middle a{
		color: #3ac0cb;
		text-decoration: underline;
	}
	.contact_s_middle a:hover{
		/*background-color: #bde5e1;
		color: #3ac0cb;*/
		background-color: #3ac0cb;
		color: #ffffff;
	}
	.contact_s_middle_t1 {
		color: #278184;
		font-family: "bublina_the_dogregular",Helvetica,sans-serif;
		font-size: 2em;
	}
	.twocups_footer{
		position: relative;
		bottom: -7px;
	}
	.contact_s_right {
		font-size: 13px;
		line-height: 3.3em;
		position: relative;
		text-transform: uppercase;
		padding: 15% 0px;
	}
	.contact_s_right a{
		text-decoration: underline;
	}
	.logo_footer img {
		width: 22%;
		max-width: 90px;
	}
}