/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

.container{
	width: 300px!important;
	margin: 0 auto
}
html, body, #main, #footer {
  min-width: 300px;
}

/* Header
---------------------------------------- */
#top-header {
	height:140px;
	}
	
/* Navigations
---------------------------------------- */

/* Primary navigation */
nav.primary {
  margin: 15px 0 0 0;
  padding: 23px 0 0;
  text-align: center;
  width: 100%;
  background: url(../images/nav.gif) left top repeat-x;
  height: 43px
}

nav.primary .responds{
	display: block;
	height: 43px;
	text-align: center;
	font-size: 26px;
	cursor:pointer;
	color: #c2c2c2;
	font-family: 'ProximaNovaLtRegular';
	}
	.sf-menu {
	  line-height: 1;
	  width: 100%;
	  margin-top: 0px;
	  padding-right: 0;
	  background: none
	}
	#topnav{
		display: none;
		position: absolute;
		height: 260px;
		z-index: 9999
	}
	.sf-menu > li {
	  margin: 0;
	  text-align: center;
	  width: 100%;
	  padding-left: 0;
	  background: none
	}
	.sf-menu > li > a {
	  margin-left: 0;
	  text-align: center;
	  padding-left: 0
	}
	.sf-menu > li > a:hover {
	}
	.sf-menu ul {
	  background: #000;
	  min-width: 113px
	}
	.sf-menu ul li li {
	  min-width: 113px
	}
	.sf-menu ul li a{
		text-align: center;
		min-width: 113px;
		font-size: 16px
	}
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		left:			23%;
		top:			55px; /* match top ul list item height */
		z-index:		99;
	}
	.sf-menu > li > a:hover,
		.sf-menu > li.sfHover > a,
		.sf-menu > li.current-menu-item > a{
			margin-top: 0px;
			height: 27px;
			}
	.sf-menu > li > span {
	  bottom: 10px;
	  display: block;
	  height: 2px;
	  left: 0;
	  position: absolute;
	  width: 100%;
	}
	
/* Logo */
.logo {
	width:100%;
	text-align:center;
	margin:25px 0 0 0;
	}
	.logo img{
		width:100px;
		height:auto;
		}
	.logo h1,
	.logo h2 {
		font-size:30px;
		}
		.logo .tagline {
			display:none;
			}
	
	/* Navigation select styling */
	select.mnav {
		width:80%;
		clear:both;
		margin:15px 0;
		}
		
	
	/* Top search */
	#top-search {
		margin-top:12px;
		}
	#top-search .input-search {
		width:130px;
		margin-right:0;
		}
	#top-search #submit {
		width:20px;
		height:20px;
		padding:0;
		background:url(../images/search-icon.gif) 0 0 no-repeat;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		position:absolute;
		right:0;
		top:8px;
		}
	
	
	/* Header widget */
	#widget-header {
		padding:15px 0 15px 0;
		font-size:10px;
		text-align:center;
		}
		.widget-header li {
			padding:0 0 0 2px;
			}
	
	
	/* Slider
	---------------------------------------- */
	.flexslider-holder {
		}
		.flexslider-container {
		  background: url("images/loading.gif") no-repeat scroll 50% 50% #FFFFFF;
		  height: 103px;
		}
/* Under Slider */
.under_slider {
  height: 265px;
  padding: 25px 0;
}

/* Carousel */	
.es-carousel-wrapper {
  position: relative;
  width: 270px;
}
.es-carousel {
  float: right;
  overflow: hidden;
  width: 270px;
}
.es-carousel ul li{
	width: 116px!important;
	margin-left: 13px
}
.es-carousel ul li a img {
  height: auto;
}
.overlay h2 {
  font-size: 14px;
  margin: 40px 0 0 14px!important
}
.text-styled {
  width: 100%;
  clear: both;
  padding-top: 20px
}
.text-styled p.moretext {
  margin-top: 0px;
}

.es-nav {
  left: 257px;
  position: absolute;
  top: 149px;
}
.read {
	white-space: nowrap; }
	
	
	
	#content .indent {
		padding:0;
		}
	
	#before_content_area {
		margin:0;
		}
		#before_content h1 {
		  width: 290px;
		  margin-bottom: 20px
		}
	#home_content_area .indent {
		padding:0;
		}

	/* Content Home */
	.content_home {
	  padding: 10px 0 40px;
	}
	.content_home .widget-area{
		margin-top: 30px
	}
	/* Flickr widget */
	.flickrImages a {
		width:49px;
		height:49px;
		}
	
	/* Request a quote */
	.box-text {
		width:100%;
		float:none;
		}
	.box-button {
		width:100%;
		float:none;
		text-align:center;
		padding-left:0;
		padding-right:0;
		}
		.box-button .button {
			float:none;
			}
	
	/* Post */
	.featured-thumbnail {
		float:none;
		margin:0 0 20px 0;
		}
		.featured-thumbnail img {
			width:100%;
			height:auto;
			margin-bottom: 20px
			}
	.featured-thumbnail .fright {
		float:none;
		clear:left;
		}
	.featured-thumbnail.large {
		width:auto;
		height:auto;
		margin:0 0 10px 0;
		}
	
	
	/* Single Team */
	.single-team .img-wrap img {
		width:auto;
		height:auto;
		float:left;
		margin:0 10px 5px 0;
		}
	.single-team .extra-wrap {
		display:inline;
		}
	
	
	/* Comments */
	.comment-meta {
		position:static;
		padding-bottom:1em;
		}
	.comment-author {
		padding-bottom:0;
		}
	
	#commentform input[type="text"],
	#commentform textarea {
		width:240px;
		max-width:240px;
		min-width:240px;
		}
	
	

	/* Latest Post */
				
	ul.latestpost li {
	  height: 230px;
	}
/* Portfolio
---------------------------------------- */

/* 1 column portfolio*/
#gallery.one_column .portfolio li a.image-wrap {
	width:290px;
	height:160px;
	float:none;
	}
#gallery.one_column .zoom-icon {
	width:290px;
	height:160px;
	}
	#gallery.one_column .folio-desc {
		width:100%;
		padding-top:15px;
		margin:0;
		}
			
/* 4 columns portfolio*/
#gallery.four_columns .portfolio li {
	width:100%;
	margin:0 0 30px 0;
	float:none;
	}
	#gallery.four_columns .portfolio li a.image-wrap {
		width:100%;
		height:255px;
		}
		#gallery.four_columns .portfolio li a img {
			width:100%;
			height:auto;
			}
	#gallery.four_columns .zoom-icon {
		width:100%;
		height:255px;
		}

/* 2 columns portfolio*/
#gallery.two_columns .portfolio li {
	width:100%;
	margin-right:0;
	}
	#gallery.two_columns .portfolio li a.image-wrap {
		width:290px;
		height:157px;
		}
	#gallery.two_columns .zoom-icon {
		width:290px;
		height:157px;
		}

/* Carousel */
.es-carousel ul li h4 {
	display:none;
	}
.es-carousel ul li .excerpt {
	display:none;
	}
.es-carousel ul li .link {
	display:none;
	}	
.extra-wrap {
  display: inline;
}
.latestpost li div.extra-wrap {
  display: block;
  margin-bottom: 8px;
}
	
/* Google map */
#map {
	width:265px;
	height:265px;
	}
	
/* Contact form */
.wpcf7-form p.field input {
	width:245px;
	}
.wpcf7-form textarea {
	float:left;
	width:264px;
	max-width:264px;
	min-width:264px;
	}
.wpcf7-not-valid-tip {
	width:255px !important;
	position:absolute;
	left:0 !important;
	top:0 !important;
	padding:4px 0 4px 10px !important;
	background:#f3b7b7 !important;
	color:red !important;
	border:1px solid red !important;
	}
		
	
/* Footer
---------------------------------------- */
#widget-footer h4{
	margin-top: 20px!important
}
}