/**
 * @package WordPress
 * @subpackage Halsey
 * @since Halsey 1.0
 * 
 * Responsive Design CSS Rules
 * Created by CMSMasters
 * 
 */


/* ---------- Large Monitor (Note: Design for a width more than 1440px) ---------- */

@media only screen and (min-width: 1440px) {
	
	.pj_options_block {right:60px;}
	
	#page {width:1280px;}
	
	#top {margin:40px 60px 20px;}
	
	.top_sidebar,
	.cmsms_breadcrumbs, 
	.headline,
	#bottom,
	#header,
	#footer {
		padding-right:60px;
		padding-left:60px;
	}
	
	.content_wrap,
	.middle_sidebar {margin:0 60px;}
	
	#navigation > li > a,
	#navigation ul li a {
		padding-right:30px;
		padding-left:30px;
	}
	
	#navigation ul li a {width:110px;}
	
	.p_options_block,
	.p_options_loader {right:60px;}
	
	#sidebar .widget_custom_flickr_entries .flickr_badge_image:nth-child(3n+1) {padding-right:0;}
	
}


/* ---------- Tablet Portrait (Note: Design for a width more than 767px but less than 1024px) ---------- */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	
	#sidebar .widget_custom_flickr_entries .flickr_badge_image:nth-child(2n+1) {padding-right:0;}
	
	.cmsms_currency,
	.cmsms_price,
	.cmsms_coins {font-size:30px;}
	
	.one_third .pricing_title, .one_half .pricing_title {font-size:24px;}
	
	.cmsms_title,
	.pricing_button {font-size:18px;}
	
	.colored_banner {padding:20px 10px;}
	
}


/* ---------- Small Tablet (Note: Design for a width more than 540px but less than 769px) ---------- */

@media only screen and (min-width: 541px) and (max-width: 768px) {
	
	.one_fourth {
		width:46%;
		float:left;
	}
	
	.portfolio.four_columns .project:nth-child(odd), 
	.format-album.cmsms_four .resize figure:nth-child(odd),
	.post_type_shortcode.four_columns article:nth-child(odd),
	.cmsms_sitemap_archive li:nth-child(odd),  
	.cmsms_sitemap > li > ul > li:nth-child(odd) {
		float:left;
		padding-right:4%;
		width:48%;
	}
	
	.portfolio.four_columns .project:nth-child(even),  
	.format-album.cmsms_four .resize figure:nth-child(even), 
	.post_type_shortcode.four_columns article:nth-child(even), 
	.cmsms_sitemap_archive li:nth-child(even), 
	.cmsms_sitemap > li > ul > li:nth-child(even) {
		float:right;
		padding-right:0;
		width:48%;
	}
	
	.portfolio.four_columns, 
	.post_type_shortcode.four_columns {margin-right:0;}
	
}

/* ---------- Small Monitor (Note: Design for a width less than 1024px) ---------- */

@media only screen and (max-width: 1023px) {
	
	#page {width:90%;}
	
	#navigation > li > a,
	#navigation ul li a {
		padding-right:15px;
		padding-left:15px;
	}
	
	#navigation ul li a {
		width:140px;
		text-align:left;
	}
	
	.widget_custom_popular_entries li .ovh {overflow:visible;}
	
	.header_inner {
		height:auto;
		text-align:center;
	}
	
	#header .social_icons, 
	.header_html {
		position:relative;
		display:block;
		text-align:center;
		margin-bottom:15px;
	}
	
	#header nav {
		position:relative;
		top:auto;
		right:auto;
		display:block;
	}
	
	#navigation {
		display:inline-block;
		margin-bottom:20px;
	}
	
	.logo {
		position:relative;
		top:auto;
		left:auto;
		margin:47px 0 17px;
	}
	
	#middle_content .commentlist, 
	#middle_content #commentform > p {width:100%;}
	
	.one_fourth .tabs > li.current a span {padding:9px 10px;}
	
	.one_fourth .tabs > li a span {text-align:left;}
	
	.one_fourth .tabs > li {
		display:block;
		list-style:none;
	}
	
	.one_fourth .tabs > li.current:first-child a {margin:0 0 -1px;}
	
	.one_fourth .tabs > li a,
	.one_fourth .tabs > li:first-child a {
		margin:0 0 -1px 10px;
		border:1px solid #edecec;
		-webkit-transition:margin-left .3s ease-in-out;
		-moz-transition:margin-left .3s ease-in-out;
		-ms-transition:margin-left .3s ease-in-out;
		-o-transition:margin-left .3s ease-in-out;
		transition:margin-left .3s ease-in-out;
	}
	
	.one_fourth .tabs > li.current a {margin-left:0;}
	
	.one_fourth .tabs > li.current a:before {
		right:-20px;
		bottom:0;
		left:auto;
		width:20px;
		height:100%;
	}
	
	.one_fourth .tab .tab_content {border:1px solid #ebecec;}
	
	.one_fourth .widget_custom_posts_tabs_entries .tabs > li {width:100%;}
	
	.two_fifth .colored_button,
	.one_fourth .colored_button,
	.one_third .colored_button,
	.two_fifth .colored_title,
	.one_fourth .colored_title,
	.one_third .colored_title {
		display:block;
	}
	
	.two_fifth .colored_button,
	.one_fourth .colored_button,
	.one_third .colored_button {padding:15px 30px;}
	.logo-wrapper .logo {
        position: absolute;
        top: -20px;
	}
	
}

/* ---------- Small Tablet & Mobile (Note: Design for a width less than 768px) ---------- */

@media only screen and (max-width: 767px) {
	
	#page {
		width:96%;
	}
	
	#content,
	.content_wrap.l_sidebar #content,
	#sidebar, 
	.content_wrap.l_sidebar #sidebar {
		float:none;
		padding:25px 0;
		width:100%;
	}
	
	.content_wrap {background:none;}
	
	.portfolio.three_columns, 
	.portfolio.one_column {margin-right:0;}
	
	.one_first.right_column,
	.one_half.right_column,
	.one_third.right_column,
	.two_third.right_column,
	.one_fourth.right_column,
	.three_fourth.right_column,
	.one_sixth.right_column,
	.one_fifth.right_column,
	.two_fifth.right_column,
	.three_fifth.right_column,
	.four_fifth.right_column,
	.five_sixth.right_column,
	.one_first.first_column.right_column, 
	.five_sixth.first_column.right_column, 
	.four_fifth.first_column.right_column, 
	.three_fourth.first_column.right_column, 
	.two_third.first_column.right_column, 
	.three_fifth.first_column.right_column, 
	.one_half.first_column.right_column, 
	.two_fifth.first_column.right_column, 
	.one_third.first_column.right_column, 
	.one_fourth.first_column.right_column, 
	.one_fifth.first_column.right_column, 
	.one_sixth.first_column.right_column {float:none;}
	
	.one_sixth,
	.one_fifth,
	.two_fifth,
	.three_fifth,
	.four_fifth,
	.five_sixth,
	.one_half, 
	.one_third, 
	.two_third, 
	.three_fourth {
		float:none;
		width:96%;
		margin:0 2%;
	}
	
	.portfolio.three_columns .project, 
	.format-album.cmsms_two .resize figure, 
	.format-album.cmsms_three .resize figure {
		float:none;
		padding-right:0;
		width:100%;
	}
	
	.opened-article .project > .two_third,
	.opened-article .project > .one_third {
		margin:0;
		width:100%;
	}
	
	.error h1 {font-size:200px;}
	
	.responsive_nav  {
		display:block;
		margin:0 auto 30px;
		width:36px;
		height:28px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		background:#3c4143 url(../img/resp_navi_bg.png) no-repeat 50% 50%;
		z-index:9999;
		position:relative;
	}
	.logo-wrapper .logo {
        position: absolute;
        top: -30px;
	}
	
	#header {padding:0;}
	
	#header nav {overflow:hidden;}
	
	#navigation {
		position:relative;
		display:none;
		overflow:hidden;
		margin:0;
	}

	#navigation li {
		display:block;
		float:none;
		overflow:hidden;
		background:none;
	}
	
	#navigation li > a {
		display:block;
		border-top:1px solid #ebecec;
		text-align:left;
	}
	
	#navigation > li > a, 
	#navigation ul li a {
		padding:9px 30px 10px;
	}
	
	#navigation ul li a {
		margin:0;
		width:auto;
	}
	
	#navigation ul ul li a {padding-left:70px;}
	
	#navigation ul li a {padding-left:50px;}
	
	#navigation ul, 
	#navigation ul ul, 
	#navigation > li > ul {
		position:relative;
		top:auto;
		left:auto;
		display:none;
		visibility:visible;
		margin:0;
		padding:0;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
		background-color:transparent;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
		opacity:1;
		-webkit-transition:none;
		-moz-transition:none;
		-ms-transition:none;
		-o-transition:none;
		transition:none;
	}
	
	#navigation ul li {padding:0;}
	
	#navigation li.dropdown > a > span {
		display:block;
		background:url(../img/arrow_resp.png) no-repeat 100% 3px;
	}
	
	#navigation li.dropdown > a.drop_active > span {background-position:100% -33px;}
	
	.post .entry-header .atricle_box {
		display:block;
		margin-top:36px;
	}
	
	.post .published {
		position:absolute;
		top:0;
		left:0;
		display:block;
		padding:10px 0;
		width:100%;
	}
	
	#footer {text-align:center;}
	
	.footer_nav {float:none;}
	
	#footer .social_icons {
		display:inline-block;
		float:none;
	}
	
	.copyright {
		display:block;
		float:none;
	}
	
	.commentlist ul {padding-left:10px;}
	
	.comment-content {overflow:visible;}
	
	.comment-body .fn,
	.comment-body .alignleft{margin-bottom:6px;}
	
	.comment-body .published,
	.comment-body .fn,
	.comment-reply-link,
	#cancel-comment-reply-link {	float:none;}
	
	.error .search_line {width:60%;}
	
	.error h2 {font-size:200px;}
	
	.colored_button,
	.colored_title {
		display:block;
	}
	
	.colored_button {padding:15px 30px;}
	
	.p_options_block {right:auto;}
	
	.p_sort a[name="p_name"],
	.p_sort a[name="p_date"],
	div.p_filter {float:left;}
	
	.pj_sort_block {padding:49px 30px;}
	
	.p_sort{
		display:block;
		float:none;
	}
	
	.tabs > li.current a span {padding:9px 10px;}
	
	.tabs > li a span {text-align:left;}
	
	.tabs > li {
		display:block;
		list-style:none;
	}
	
	.tabs > li.current:first-child a {margin:0 0 -1px;}
	
	.tabs > li a,
	.tabs > li:first-child a {
		margin:0 0 -1px 10px;
		border:1px solid #edecec;
		-webkit-transition:margin-left .3s ease-in-out;
		-moz-transition:margin-left .3s ease-in-out;
		-ms-transition:margin-left .3s ease-in-out;
		-o-transition:margin-left .3s ease-in-out;
		transition:margin-left .3s ease-in-out;
	}
	
	.tabs > li.current a {margin-left:0;}
	
	.tabs > li.current a:before {
		right:-20px;
		bottom:0;
		left:auto;
		width:20px;
		height:100%;
	}
	
	.tab .tab_content {border:1px solid #ebecec;}
	
	.tour_content {display:block;}
	
	.tour,
	.tour_box_content {
		width:100%;
		float:none;
	}
	
	.tour > li {margin-right:0;}
	
	.tour > li.current a {border-right:1px solid #ebecec;}
	
	.widget_custom_posts_tabs_entries .tabs > li {width:100%;}
	
	@media (-webkit-min-device-pixel-ratio: 2) {
		#navigation li.dropdown > a > span {
			background-image:url(../img/retina/arrow_resp@2x.png);
			background-size:15px 50px;
		}
		
		.responsive_nav  {
			background-image:url(../img/retina/resp_navi_bg@2x.png);
			background-size:22px 10px;
		}
	}
	
}

/* ---------- Mobile (Note: Design for a width less than 541px) ---------- */

@media only screen and (max-width: 540px) {
	
	div.jp-video div.jp-current-time, 
	div.jp-audio div.jp-current-time, 
	div.jp-video div.jp-time-sep, 
	div.jp-audio div.jp-time-sep, 
	div.jp-video div.jp-duration, 
	div.jp-audio div.jp-duration {display:none;}
	
	.one_fourth {
		width:96%;
	}
	
	.portfolio.two_columns .project, 
	.portfolio.four_columns .project:nth-child(odd), 
	.portfolio.four_columns .project:nth-child(even), 
	.format-album.cmsms_four .resize figure:nth-child(odd), 
	.format-album.cmsms_four .resize figure:nth-child(even), 
	.post_type_shortcode.four_columns article:nth-child(odd), 
	.post_type_shortcode.four_columns article:nth-child(even),
	.cmsms_sitemap_archive li:nth-child(odd),  
	.cmsms_sitemap_archive li:nth-child(even), 
	.cmsms_sitemap > li > ul > li:nth-child(odd),
	.cmsms_sitemap > li > ul > li:nth-child(even) {
		float:none;
		padding-right:0;
		width:100%;
	}
	
	.portfolio.four_columns, 
	.portfolio.three_columns, 
	.portfolio.two_columns, 
	.post_type_shortcode.four_columns {margin-right:0;}
	
	.post .entry-header .atricle_box_inner {padding:0;}
	
	.cmsms_comments_wrap {
		float:none;
		margin:0;
		line-height:18px;
	}
	
	a.cmsms_comments {
		display:inline-block;
		float:none;
		margin:0;
		min-width:auto;
		height:auto;
		background:none;
		line-height:18px;
	}
	
	a.cmsms_comments:before {display:none;}
	
	.user_name, 
	.cmsms_category {display:block;}
	
	#commentform label {padding-left:0;}
	
	.error .search_line {width:100%;}
	
	.error h2 {font-size:120px;}
	
	select {width:200px;}
	
	.post_type_shortcode.four_columns, 
	.post_type_shortcode.two_columns, 
	.portfolio.two_columns .project, 
	.portfolio.four_columns	{margin-right:0;}
	
	.cmsms-form-builder .cmsms_input,
	#commentform input[type="text"],
	#commentform textarea,
	.cmsms-form-builder input[type="text"] {width:100%;}
	
	#commentform label {
		display:block;
		padding-left:0;
	}
	
	.cmsms_nav_wrap_wrap {display:none;}
	
	#top {margin:40px 15px 20px;}
	
	#top_sidebar,
	.cmsms_breadcrumbs, 
	.headline,
	#bottom,
	#footer {
		padding-right:15px;
		padding-left:15px;
	}
	
	.content_wrap,
	.middle_sidebar {margin:0 15px;}
	
	.pj_options_loader {right:15px;}
	
}

/* ---------- Mobile (Note: Design for a width less than 401px) ---------- */

@media only screen and (max-width: 400px) {
	
	.gallery-item {width:100% !important;}
	
}