/* Mobile CSS */

/* Responsive Design

------------------------------------------------------------ */


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

	html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}

	#wrap {

		width: 96%;

		margin:0 auto;

	}

	#header{
   margin: 0;
    overflow: hidden;
    padding: 0 0 15px;
    width: 100%;

	}
	#header .wrap{
		width: 100%;	
	}
	#title-area #title{
		text-align: center;	
	}
	#title-area #description{
		text-align: center;	
	}
	
	.top .wrap{
		width: 100%;	
	}

	#inner{

    overflow: hidden;
    padding: 15px;
    width: 96%;
	}
	.content-sidebar #content-sidebar-wrap, .full-width-content #content-sidebar-wrap, .sidebar-content #content-sidebar-wrap{
		width: 100%;	
	}

	.content-sidebar #content, .sidebar-content #content {
    width: 480px;
	}
	
	.sidebar-content-sidebar #content-sidebar-wrap, .sidebar-sidebar-content #content-sidebar-wrap {
   		 float: right;
	}
	.sidebar {
		float: right;
		width: 200px;
	}
		
	#sidebar-alt {
    	float: left;
    	width: 130px;
	}
	#content-sidebar-wrap{

		float: left;
		width: 540px;

	}
	
	#content {
    float: left;
    width: 320px;
	}
	
	#options{

		width: 100%;	

	}

	#home_gallery{

		width: 100%;

		height: auto !important;	

	}

	.flexslider ul li iframe{

		height: auto !important;	

	}

	

	#title-area {

		text-align: center;

		width: 100%

	}

	.header-image #title-area,

	.header-image #title,

	.header-image #title a {

		float: none;

		width: 100%;

	}

	.header-image #title a {

		background-position: center;

	}

	#header .searchform{float:none;}

	#header .widget-area{width:100%; text-align:center;}

	

	#description,

	.page-header,

	#home-intro {

		text-align: left;

	}

	#nav, #subnav{
  display: block;
    float: left;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;	
	}
	

	.intro{text-align:center;}



	#header-sociable ul {

		text-align: center;

		margin: 25px 0 0;

		width: 100%;

	}



	#header-sociable li {

		float: none;

	}



	#header-sociable a {

		margin: 0 3px 5px;

	}

	

	#container{width:100% !important;}
	

	#nav li a, #subnav li a, #header ul.nav li a, #header ul.menu li a{

		padding:26px 7px;

		font-size:1em;

	}

	#nav .wrap {
    overflow: hidden;
    width: 550px !important;
	}

	#title-area #title, #title-area #description{margin:10px 0 0 5px;}

	#nav ul, #subnav ul, #header ul.nav, #header ul.menu{
		float: none;	
	}

	.header-full-width #title-area, .header-full-width #title, .header-full-width #title a{width:100%; padding: 0 0 0 10px;}

	#footer-widgets, #footer {
		padding: 20px 0;
		width: 100% !important;
	}
	
	#footer_nav {
     float: none;
    text-align: center;
	}
	#footer .creds{
		text-align: center;
		float: none;	
	}
	
	.one-third.pricing:after, .special-services-box:after{
		width: 94%;	
	}
	 .one-third.pricing:before, .special-services-box:before{
		 	width: 98%;
	 }
	 .portfolio_single_feature{
			width: 100%; 
	 }
	.folio-entry {
		float: left;
		width: 450px;
	}
	#gallery_widget{
		width: 100% !important;	
	}
	#pagination_widget{
		width: 100%;	
	}
	.two-columns, .four-columns{
		margin-right:15px !important; 
		margin-bottom:15px !important; 
		width:45% !important;
		}
	.three-columns{
		margin-right:15px !important; 
		width:29% !important;
	}
	#top-link{
		display: none !important;	
	}
	#footer-widgets .wrap, #footer .wrap{
		width: 100%;	
	}
	.footer-widgets-1, .footer-widgets-2,.footer-widgets-3{
		width: 31%;	
	}
	.portfolio-widget{
		 margin: 0 8px 0 0;	
	}
	.element-4col, .gallery-4col{
		width: 220px !important;
		height: 160px !important;
	}	
}



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

	html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}
	
	#tspLeftFixed{
	display: none;	
	}

	#wrap {

		width: 90%;

		margin:0 auto;
		
		padding: 0 10px;

	}
	.top .wrap, .top_widget .widget{
		width: 100%;	
	}
	

	#header{

		width: 100%;	

	}

	#inner{

		width: 100%;

		padding: 0;	

		overflow: hidden;

	}

	

	#options{

		width: 100%;	

	}

	#home_gallery{

		width: 100%;

		height: auto !important;	

	}

	.flexslider ul li iframe{

		height: auto !important;	

	}

	

	#title-area {

		text-align: center;

		width: 100%

	}



	.header-image #title-area,

	.header-image #title,

	.header-image #title a {

		float: none;

		width: 100%;

	}



	.header-image #title a {

		background-position: center;

	}



	#header .searchform{float:none;}

	#header .widget-area{width:100%; text-align:center;}

	

	#description,

	.page-header,

	#home-intro {

		text-align: center;

	}



	#header-sociable ul {

		text-align: center;

		margin: 25px 0 0;

		width: 100%;

	}



	#header-sociable li {

		float: none;

	}



	#header-sociable a {

		margin: 0 3px 5px;

	}

	

	#container{width:100% !important;}

	#mobile_menu #nav{
		width: 100%;	
	}

	#nav {

		display: none;


	}
		

	#nav .current_page_item a, #nav li a:hover, #nav li a:active{

   	 color: #444444 !important;

	}

	

	#nav li li a, #nav li li a:link, #nav li li a:visited, 

	#subnav li li a, #subnav li li a:link, #subnav li li a:visited, 

	#header ul.nav li li a, 	#header ul.nav li li a:link, 

	#header ul.nav li li a:visited, #header ul.menu li li a, 

	#header ul.menu li li a:link, #header ul.menu li li a:visited{

		background-color: #F5F5F5;

   		color: #333333 !important;

		 font-size: 12px !important;

	}

	#mobile_menu{

	display: block;

    float: left;

    margin-bottom: 18px;

    overflow: hidden;

    width: 100%;

	border:1px solid #ddd;

	}

	

/* mobile menu nav*/



.menu_title{

	background:#F96E5B;

    float: left;

    overflow: hidden;

    padding: 10px 0;

    position: relative;

    text-align: center;

    width: 100%;

	cursor:pointer;

	color:#fff;

	font-family:"Open Sans","Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;

	font-size:14px;

	font-weight:bold;

}



#mobile_menu #nav ul {
    background: none repeat scroll 0 0 #FFFFFF;

   display: block;

    float: left;

    overflow: hidden;

    width: 100%;

}



#mobile_menu #nav li {

	float: left;

	list-style-type: none;

	width: 100%;



}



#mobile_menu #nav a {

	border: none;

	color: #666;

	display: block;

	font-size: 12px;

	font-weight: 600;

	margin: 10px 0;

	line-height: 20px;

	padding: 0 20px;

	position: relative;

	text-decoration: none;

	text-transform: uppercase;

	

}



#mobile_menu #nav li:last-child a{

	border-right: none;

}



#mobile_menu #nav li a:active,

#mobile_menu #nav li a:hover,

#mobile_menu #nav .current_page_item a,

#mobile_menu #nav .current-cat a,

#mobile_menu #nav .current-menu-item a{

	background: none;

	color: #d54e21;

}



#mobile_menu #nav li li a,

#mobile_menu #nav li li a:link,

#mobile_menu #nav li li a:visited{

	border-color: white #ddd #ddd;

	border-right: 1px solid #ddd;

	border-style: none solid solid;

	border-width: medium 1px 1px;

	color: #888;

	font-size: 11px;

	font-weight: 400;

	margin: 0;

	padding: 10px 20px;

	position: relative;

	text-transform: none;

	width: 100%;

}



#mobile_menu #nav li li a:active,

#mobile_menu #nav li li a:hover{

	background-color: #f5f5f5;

	color: #333;

}



#mobile_menu #nav li ul{

	height: auto;

	

	margin: 1px 0 0 -1px;

	position: relative;

	width: 100%;

	z-index: 9999;

}



#mobile_menu #nav li ul a{

	width: 140px;

}



#mobile_menu #nav li ul ul{

	margin: 0;

}



#mobile_menu #nav li ul ul ul{

	margin: -39px 0 0 199px;

}



.menu li:hover ul ul {

	left: -9999px;

}



.menu li:hover,

.menu li.sfHover {

	position: static;

}



ul.menu li:hover>ul,

ul.menu li.sfHover ul,

#header .menu li:hover>ul,

#header .menu li.sfHover ul {

	left: auto;

}



.menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {

	float: right;

	top: 12px;

}



/* end mobile menu nav css*/	


	#header .menu,

	.slides_container div.caption,

	.pagination {

		display: none;

	}


	.content-sidebar #content,

	.sidebar-content #content,

	.portfolio-clip,

	.post-clip,

	#jcarousel-post .jcarousel-item {

		width: 100%;

	}



	#slides,

	.slides_container,

	.slides_container div {

		height: 93px;

		width: 260px;

	}



	#slides.portfolio-slideshow,

	#slides.portfolio-slideshow .slides_container,

	#slides.portfolio-slideshow .slides_container div {

		height: 124px;

		width: 220px;

	}



	#slides .next,

	#slides .prev {

		top: 31px;

	}



	#home-intro h3.dizain-title {

		margin-right: 0;

	}



	#home-intro a.intro-button {

		margin: 25px 0 5px;

		position: static;

	}



	#portfolio .portfolio {

		border-bottom: 1px solid #f5f5f5;

		margin-bottom: 30px;

		padding-bottom: 30px

	}



	ul#sort-by {

		margin-top: 25px;

	}



	ul#sort-by a {

		margin: 0 5px 5px 0;

	}



	a.intro-button {

		display: inline-block;

		float: none;

		margin: 5px 0 20px;

	}



	.dizain-jcarousel-text {

		margin-right: 0;

	}



	

	.zilla-one-half,

	.zilla-one-third,

	.zilla-two-third,

	.zilla-three-fourth,

	.zilla-one-fourth,

	.zilla-one-fifth,

	.zilla-two-fifth,

	.zilla-three-fifth,

	.zilla-four-fifth,

	.zilla-one-sixth,

	.zilla-five-sixth {

		margin-bottom: 21px !important;

		margin-right: 0 !important;

		width: 100% !important;

	}



	.five-sixths,

	.four-fifths,

	.four-sixths,

	.one-fifth,

	.one-fourth,

	.one-half,

	.one-sixth,

	.one-third,

	.three-fifths,

	.three-fourths,

	.three-sixths,

	.two-fifths,

	.two-fourths,

	.two-sixths,

	.two-thirds {

		padding: 0;

		width: 100%;

	}



	.author-box .avatar {

		display: inline-block;

		margin: 5px 50px 25px;

	}



	.author-box p,

	.comment-text,

	.comment-list ul.children,

	.comment-list ul.children .comment-text,

	.comment-list ul.children .children {

		margin-left: 0;

	}



	.sidebar {

		border-top: 1px solid #f5f5f5;

		margin-top: 30px;

		

	}



	.comment-entry {

		background-color: #f5f5f5;

	}



	.comment-avatar {

		float: none;

		margin-right: 0;

		padding-top: 30px;

		text-align: center;

	}



	#author,

	#comment,

	#email,

	#url,

	.wpcf7-text,

	.wpcf7-textarea,

	.wpcf7-file,

	.wpcf7-quiz,

	.wpcf7-textarea {

		width: 94%;

	}

	.breadcrumb{

		padding: 13px;	

	}

	.entry-content{
		width: 100%; 	

	}

	

	.sidebar .widget {

		margin: 0 0 30px;

		padding: 10px 20px 0;

	}

	#footer-widgets .wrap{
		width: 100%;	
	}

	#footer .gototop,

	#footer .creds {

		text-align: center;

	}



	#footer .gototop {

		margin-bottom: 5px;

	}



	.post-thumb {

		width: 220px !important;

		height: 138px !important;

	}



		#flickr_badge_wrapper{width:100% !important;}

	.special-services-box{padding:0 !important;}

	div.one-half.special-services-box, div.one-third.special-services-box, div.two-third.special-services-box, div.three-fourth.special-services-box, div.one-fourth.special-services-box{width:100% !important;}

	#top-link{display:none !important;}

	.flex_container{width:100% !important;}

	#container{width:100% !important; margin:20px auto !important;}

	.element-2col, .gallery-2col, .element-3col, .gallery-3col, .element-4col, .gallery-4col{width:100% !important;  display: block; overflow: hidden; clear: both; height: auto !important; margin:5px auto !important;}

	.portfolio_image img{width:100%;}

	div.one-half.pricing, div.one-third.pricing, div.two-third.pricing, div.three-fourth.pricing, div.one-fourth.pricing{width:100% !important;}

	.two-columns, .three-columns, .four-columns{width:100% !important; margin:0 0 15px !important;}

	.pricing .box-wrapper, .special-services-box .box-wrapper{border:1px dotted #dddddd;}

	.carousel_item .element-2col, .carousel_item .gallery-2col, .carousel_item .element-3col, .carousel_item .gallery-3col, .carousel_item .element-4col, .carousel_item .gallery-4col{height:auto !important;}

	.sidebar{width:100% !important;}

	.content-sidebar-sidebar #content, .sidebar-sidebar-content #content, .sidebar-content-sidebar #content{width:100%; padding:0;}

	ul.tabs li a{padding:0 10px !important;}

	#footer_nav{overflow:hidden; width:100%;}

	#footer .wrap{padding:10px; width: 100%;}

	#footer_nav{padding:0 0 10px;}

	#footer a, #footer a:visited{font-size:11px;}

	#content-sidebar-wrap, .content-sidebar-sidebar #sidebar-alt{width:100% !important;}

	

	.element-3col #icon {

    		width: 100% !important;

	}

	

	#content{width:100%;}

	

	#options li {padding: 0 2px !important;}

	#options li a{padding: 3px 5px !important;}

	#sidebar-alt{width:100%;}

	.archive-page{width:100%; padding:0;}

	

	#testimonials .testim-pane{width: 200px !important; float: left;}

	#testimonials div h3, #testimonials div p{ width: 100% !important;}

	#testimonials img {clear: both;}

	#testimonials div{display: block !important;}

	

	.portfolio_single_feature, .portfolio_single_feature img{

		width: 100%	

	}

	.metaItem {
		padding: 0 20px;
		width: 90%;
		margin: 0 0 20px;
	}

	.folio-entry{

		width: 100%;	

	}

	.folio-entry p{

		padding: 0 20px;

		width: 85%;	

	}

	

	#gallery_widget{width: 100% !important}

	#pagination_widget{width: 100%;}

	

	.feature-bottom .textwidget {

    padding: 0 20px;

	}
	.flex-direction-nav, flex-control-nav{
		display: none;	
	}

	.featuredpage .page{

		padding: 0 20px !important;	

	}

	.featuredpost .post{

		padding: 0 20px 15px !important;	

	}

	.feature-bottom .featuredpost img, .feature-bottom .featuredpage img{

		width: 100%;

	}

	#footer-widgets{

		width: 100%;	

	}

	.footer-widgets-1,.footer-widgets-2, .footer-widgets-3{

		width: 100%;

	}

	#footer{

		width: 100%;

		text-align: center;	

		padding: 10px 0 20px;

	}

	#footer-widgets ul {

		float: left;

		line-height: 26px;

		margin: 0;

		padding: 0;

		width: 92%;

	}

	.status-publish, .hentry{
		padding: 0 20px;	
	}

	#content .post {

		padding: 0 20px;

	}
	#content .post-info{
		width: 100%;	
	}
	#content .archive-page{
		width: 100%;	
	}
	#comments, #respond{
		padding: 20px;
	}
	
	.one-third.pricing:after, .one-third.pricing:before, .special-services-box:after, .special-services-box:before{
		width: 100%;	
	}
}





@media only screen and (width: 320px) {

	html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}

	.latest_blog{width:90% !important; margin:0 auto;}

	.latest_blog .carousel h4{padding:0 5px !important;}

	.home_blog_meta, .post_box_comments{padding:0 5px !important;}

	.latest_blog p{padding:0 5px !important;}

	.latest_blog_description{width:100% !important;}

	

	



}





@media only screen and (width: 480px) {

	html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}

	.latest_blog{width:100% !important; margin:0 auto;}

	.latest_blog .carousel h4{padding:0 5px !important;}

	.home_blog_meta, .post_box_comments{padding:0 5px !important;}

	.latest_blog p{padding:0 5px !important;}

	.latest_blog_description{width:40% !important;}

	.latest_blog .flex_container{width:52% !important; float:right;}

	

		

}