/**
 * @package Site Template
 * @subpackage Whiteblack
 * @since Whiteblack 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) {
	
	body.cmsms_boxed #page {width:1240px;}
	
	.header_inner,
	.custom_header,
	.cmsms_breadcrumbs_inner,
	.headline_inner,
	.middle_inner,
	.bottom_inner, 
	.footer_inner {width:1160px;}
	
	.portfolio.four_columns .project {
		padding-right:3.9%;
		padding-left:0.1%;
	}
	
}


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

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	
	input[type="text"], 
	textarea {width:93%;}
	
	#bottom input[type="text"],
	#bottom textarea {width:87%;}
	
	.cmsms-form-builder select {width:70%;}
	
	#sidebar .widget .ovh {overflow:visible;}
	
}


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

@media only screen and (min-width: 541px) and (max-width: 768px) {
	
	.one_fourth {
		width:46%;
		float:left;
	}
	
	.one_fourth:nth-child(2n+1) {clear: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 1152px) ---------- */

@media only screen and (max-width: 1151px) {
	
	.header_inner,
	.custom_header,
	.cmsms_breadcrumbs_inner,
	.headline_inner,
	.middle_inner,
	.bottom_inner, 
	.footer_inner,
	body.cmsms_boxed #page {
		width:90%;
	}
	
	body.cmsms_boxed .header_inner, 
	body.cmsms_boxed .cmsms_breadcrumbs_inner, 
	body.cmsms_boxed .headline_inner, 
	body.cmsms_boxed .middle_inner, 
	body.cmsms_boxed .bottom_inner, 
	body.cmsms_boxed .footer_inner {
		width:auto;
		padding-left:40px;
		padding-right:40px;
	}
	
	body.cmsms_boxed .header_inner {
		padding-left:0;
		padding-right:0;
		margin-left:40px;
		margin-right:40px;
	}
	
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6 {word-wrap:break-word;}
	
}

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

@media only screen and (max-width: 1023px) {
	
	#content {width:67%;}
	
	#sidebar {
		width:29%;
		margin-left:4%;
	}
	
	.content_wrap:before {left:69%;}
	
	.content_wrap.l_sidebar #content {padding-left:4%;}
	
	.content_wrap.l_sidebar:before {left:31%;}
	
	.header_inner {
		text-align:left;
		width:100%;
		padding:22px 0 0;
		margin:0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	
	body.cmsms_boxed .header_inner {
		margin-left:20px;
		margin-right:20px;
	}
	
	.logo {
		display:block;
		margin:0 0 26px 5%;
		float:left;
	}
	
	.responsive_nav  {
		background:#7cc576 url(../../images/resp_nav_but_bg.png) no-repeat 7px 8px;
		display:block;
		width:36px;
		height:27px;
		float:right;
		margin:5px 5% 27px 0;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
	}
	
	html.csstransitions .responsive_nav {
		-webkit-transition:background-color .3s ease-in-out, background-position .3s ease-in-out;
		-moz-transition:background-color .3s ease-in-out, background-position .3s ease-in-out;
		-ms-transition:background-color .3s ease-in-out, background-position .3s ease-in-out;
		-o-transition:background-color .3s ease-in-out, background-position .3s ease-in-out;
		transition:background-color .3s ease-in-out, background-position .3s ease-in-out;
	}
	
	.responsive_nav:hover,
	.responsive_nav.active {
		background-color:#ffffff;
		background-position:7px -32px;
	}
	
	#header nav {
		display:block;
		width:100%;
		clear:both;
		margin:0;
		overflow:hidden;
		position:relative;
	}
	
	#navigation {
		background:#ffffff;
		display:none;
		width:100%;
		margin:0;
		overflow:hidden;
		position:relative;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	#navigation li {
		display:block;
		position:relative;
		z-index:203;
	}

	#navigation > li {float:none;}

	#navigation > li:before {
		content:none;
		display:none;
	}

	#navigation > li > a, 
	#navigation li.current_page_item > a,
	#navigation li:hover > a:hover, 
	#navigation li:hover > a, 
	#navigation ul li > a, 
	#navigation li li.current_page_item > a,
	#navigation li li:hover > a:hover, 
	#navigation ul li:hover > a {color:#000000;}

	#navigation > li.current_page_item > a:before {
		content:none;
		display:none;
	}

	#navigation a {
		border-bottom:1px solid #e5e5e5;
		overflow:hidden;
	}
	
	#navigation > li > a > span {
		text-align:left;
		display:block;
		min-width:auto;
		max-width:none;
		padding:13px 50px 13px 20px;
	}

	#navigation ul {
		background:none;
		display:none;
		margin:0;
		padding:0;
		visibility:visible;
		position:relative;
		left:auto;
		top:auto;
		opacity:1;
	}

	html.csstransitions #navigation ul {
		-webkit-transition:none;
		-moz-transition:none;
		-ms-transition:none;
		-o-transition:none;
		transition:none;
	}

	#navigation ul ul {
		margin:0;
		left:auto;
		top:auto;
	}

	#navigation ul li:hover > ul {margin:0;}

	#navigation ul ul:before {
		content:none;
		display:none;
	}

	#navigation ul li {border:0;}

	#navigation ul li a,
	#navigation ul li:last-child > a {
		border:0;
		border-bottom:1px solid #e5e5e5;
	}

	#navigation ul li:first-child > a {padding-top:0;}

	#navigation li li.current_page_item > a,
	#navigation ul li a:hover {
		border:0;
		border-bottom:1px solid #e5e5e5;
		background:none;
	}

	#navigation ul li a span {
		min-width:auto;
		padding:13px 50px 13px 40px;
	}
	
	#navigation ul li ul li a span {padding-left:60px;}
	
	#navigation ul li ul li ul li a span {padding-left:80px;}
	
	#navigation ul li ul li ul li ul li a span {padding-left:100px;}

	#navigation #line {display:none;}
	
	#navigation li.dropdown > a > span:before {
		content:'';
		background:url(../../images/acc_tog_bg.png) no-repeat left top;
		width:6px;
		height:6px;
		display:block;
		position:absolute;
		right:35px;
		top:20px;
	}
	
	html.csstransitions #navigation li.dropdown > a > span:before {
		-webkit-transition:background-position .3s ease-in-out;
		-moz-transition:background-position .3s ease-in-out;
		-ms-transition:background-position .3s ease-in-out;
		-o-transition:background-position .3s ease-in-out;
		transition:background-position .3s ease-in-out;
	}
	
	#navigation li.dropdown > a.drop_active > span:before {background-position:left bottom;}
	
	html.csstransitions #navigation li > a,
	html.csstransitions #navigation li li > a {
		-webkit-transition:background-color .2s ease-in-out;
		-moz-transition:background-color .2s ease-in-out;
		-ms-transition:background-color .2s ease-in-out;
		-o-transition:background-color .2s ease-in-out;
		transition:background-color .2s ease-in-out;
	}
	
	#navigation li > a:hover, 
	#navigation li.current_page_item > a,
	#navigation li:hover > a:hover, 
	#navigation li li.current_page_item > a,
	#navigation li li.current_page_ancestor > a,
	#navigation li li.current-menu-ancestor > a,
	#navigation li li:hover > a:hover {background-color:#fafafa;}
	
	#navigation li > a:before,
	#navigation li li > a:before,
	#navigation > li.current_page_item > a:before	{
		content:'';
		border:0;
		background:#7cc576;
		display:block;
		width:4px;
		height:100%;
		position:absolute;
		top:-100%;
		left:0;
	}
	
	html.csstransitions #navigation li > a:before,
	html.csstransitions #navigation li li > a:before {
		-webkit-transition:top .2s ease-in-out;
		-moz-transition:top .2s ease-in-out;
		-ms-transition:top .2s ease-in-out;
		-o-transition:top .2s ease-in-out;
		transition:top .2s ease-in-out;
	}
	
	#navigation li > a:hover:before, 
	#navigation li.current_page_item > a:before,
	#navigation li:hover > a:hover:before, 
	#navigation li li.current_page_item > a:before,
	#navigation li li:hover > a:hover:before {top:0;}
	
	.one_sixth .wrap_fb_text, 
	.one_sixth .wrap_fb_but,
	.one_fifth .wrap_fb_text, 
	.one_fifth .wrap_fb_but,
	.two_fifth .wrap_fb_text, 
	.two_fifth .wrap_fb_but,
	.one_third .wrap_fb_text, 
	.one_third .wrap_fb_but {
		display:block;
		width:auto;
		text-align:center;
		padding:0;
	}
	
	.one_sixth .wrap_fb_but,
	.one_fifth .wrap_fb_but,
	.two_fifth .wrap_fb_but,
	.one_third .wrap_fb_but {padding:10px 0 0;}
	
	.one_fourth .tab .tabs li,
	.one_fourth .tab .tabs li:first-child	{
		border-left:1px solid #dbdbdb;
		border-right:1px solid #dbdbdb;
		display:block;
		width:auto;
	}
	
	.one_fourth .tab .tabs li:first-child {border-top:1px solid #c7c7c7;}
	
	.one_fourth .tab .tab_content {
		border:1px solid #c7c7c7;
		border-top:0;
		padding:30px 20px 10px;
	}
	
	.one_fourth .tab.lpr .tabs li,
	.one_fourth .tab.lpr .tabs li + li + li,
	.one_fourth .tab.lpr .tabs li:first-child,
	.one_fourth .tab.lpr .tabs li.current {
		border-left:1px solid #dedede;
		border-right:1px solid #dedede;
		border-bottom:1px solid #dedede;
		width:auto;
	}
	
	#bottom .one_fourth .tab.lpr .tabs li,
	#bottom .one_fourth .tab.lpr .tabs li + li + li,
	#bottom .one_fourth .tab.lpr .tabs li:first-child,
	#bottom .one_fourth .tab.lpr .tabs li.current {
		border-left:1px solid #3a3a3a;
		border-right:1px solid #3a3a3a;
		border-bottom:1px solid #3a3a3a;
		width:auto;
	}
	
	#bottom .one_fourth .tab.lpr .tabs li:first-child {border-top:1px solid #3a3a3a;}
	
	#bottom .one_fourth .tab.lpr .tabs li a {
		border-top:3px solid transparent;
		border-left:0;
		border-right:0;
		border-bottom:0;
	}
	
	#bottom .one_fourth .tab.lpr .tabs li.current a,
	#bottom .one_fourth .tab.lpr .tabs li a:hover {
		border-top:3px solid #d0d0d0;
	}
	
	#bottom .one_fourth .tab.lpr .tabs li:first-child a,
	#bottom .one_fourth .tab.lpr .tabs li + li + li a {
		border-left:0;
		border-right:0;
	}
	/* 
	a span.image_rollover span {top:-1000px;}
	
	a:hover span.image_rollover span {top:150px;} */
	
}

@media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	#navigation li.dropdown > a > span:before {
		background-image:url(../../images/retina/acc_tog_bg@2x.png);
		background-size:6px 30px;
	}
	
	.responsive_nav  {
		background-image:url(../../images/retina/resp_nav_but_bg@2x.png);
		background-size:22px 50px;
	}
}

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

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

	.container {overflow:hidden;}
 
	body.cmsms_boxed .cmsms_breadcrumbs_inner, 
	body.cmsms_boxed .headline_inner, 
	body.cmsms_boxed .middle_inner, 
	body.cmsms_boxed .bottom_inner, 
	body.cmsms_boxed .footer_inner {
		width:auto;
		padding-left:20px;
		padding-right:20px;
	}
	
	body.cmsms_boxed .header_inner {margin:0;}
	
	#content,
	.content_wrap.l_sidebar #content,
	#sidebar, 
	.content_wrap.l_sidebar #sidebar {
		width:100%;
		float:none;
		padding:0;
		margin:0;
	}
	
	.content_wrap:before {
		content:none;
		display:none;
	}
	
	#content {padding-bottom:40px;}
	
	#sidebar {padding-top:40px;}
	
	#sidebar:before {
		content:'';
		background:#e5e5e5;
		width:100%;
		height:1px;
		position:absolute;
		top:0;
		left:0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	.portfolio.three_columns, 
	.portfolio.one_blocks {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% 20px;
		clear:both;
	}
	
	.portfolio.three_columns .project, 
	.format-album.cmsms_two .resize figure, 
	.format-album.cmsms_three .resize figure {
		float:none;
		padding-right:0;
		width:100%;
	}
	
	.error h1 {font-size:17em;}
	
	.cmsms_sitemap > li > ul > li,
	.cmsms_sitemap_category > li > ul > li {margin-bottom:20px;}
	
	.cmsms_sitemap > li > ul > li > ul,
	.cmsms_sitemap_category > li > ul {margin-left:20px;}
	
	.wrap_fb_text, 
	.wrap_fb_but {
		display:block;
		width:auto;
		text-align:center;
		padding:0;
	}
	
	.wrap_fb_but {padding:10px 0 0;}
	
	.footer_inner span {
		display:block;
		margin:5px 0 20px;
		clear:both;
	}
	
	.footer_inner, 
	.footer_inner .social_icons {
		text-align:center;
		display:block;
		float:none;
	}
	
	#footer p {padding-bottom:20px;}
	
	#footer .footer_nav {float:none;}
	
	.copyright {
		display:block;
		float:none;
	}
	
	.tab .tabs li,
	.tab .tabs li:first-child	{
		border-left:1px solid #dbdbdb;
		border-right:1px solid #dbdbdb;
		display:block;
		width:auto;
	}
	
	.tab .tabs li:first-child {border-top:1px solid #c7c7c7;}
	
	.tab .tab_content {
		border:1px solid #c7c7c7;
		border-top:0;
		padding:30px 20px 10px;
	}
	
	.tab.lpr .tabs li,
	.tab.lpr .tabs li + li + li,
	.tab.lpr .tabs li:first-child,
	.tab.lpr .tabs li.current {
		border-left:1px solid #dedede;
		border-right:1px solid #dedede;
		border-bottom:1px solid #dedede;
		width:auto;
	}
	
	#bottom .tab.lpr .tabs li,
	#bottom .tab.lpr .tabs li + li + li,
	#bottom .tab.lpr .tabs li:first-child,
	#bottom .tab.lpr .tabs li.current {
		border-left:1px solid #3a3a3a;
		border-right:1px solid #3a3a3a;
		border-bottom:1px solid #3a3a3a;
		width:auto;
	}
	
	#bottom .tab.lpr .tabs li:first-child {border-top:1px solid #3a3a3a;}
	
	#bottom .tab.lpr .tabs li a {
		border-top:3px solid transparent;
		border-left:0;
		border-right:0;
		border-bottom:0;
	}
	
	#bottom .tab.lpr .tabs li:first-child a,
	#bottom .tab.lpr .tabs li + li + li a {
		border-left:0;
		border-right:0;
	}
	
	.tour,
	.tour_box_content {
		border-right:1px solid #c7c7c7;
		float:none;
		width:auto;
		margin-right:4px;
	}
	
	.tour_box_content {padding:0 35px 10px 10px;}
	
	.project_content,
	.project_sidebar {
		float:none;
		width:100%;
	}
	
}

/* ---------- 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%;
	}
	
	.error .search_line {width:100%;}
	
	.error h1 {font-size:11em;}
	
	select {width:200px;}
	
	.portfolio.four_columns, 
	.portfolio.three_columns, 
	.portfolio.two_columns, 
	.post_type_shortcode.four_columns {margin-right:0;}
	
	.cmsms-form-builder .cmsms_input,
	#commentform input[type="text"],
	#commentform textarea,
	.cmsms-form-builder input[type="text"] {width:95%;}
	
	#commentform label {
		display:block;
		padding-left:0;
	}
	
	.cmsms-form-builder select {width:70%;}
	
	.pj_options_loader {right:15px;}
	
	.pj_sort > a {margin-bottom:20px;}
	
	div.pj_filter {padding:0 0 0 20px;}
	
	.featured_block > .wrap_fb_text {
		display:block;
		padding-right:0;
	}
	
	.featured_block > .wrap_fb_but {
		text-align:center;
		display:block;
		margin-top:20px;
	}
	
	.footer_inner {
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	
	.post .cmsms_post_info, 
	.archive .project .cmsms_post_info {
		float:none;
		width:100%;
		margin-right:0;
	}
	
	.cmsms_post_format_img {float:left;}
	
	.post .cmsms_post_info .user_name, 
	.post .cmsms_post_info .cmsms_category, 
	.post .cmsms_post_info .cmsms_comments_wrap, 
	.archive .project .cmsms_post_info .user_name, 
	.archive .project .cmsms_post_info .cmsms_category, 
	.archive .project .cmsms_post_info .cmsms_comments_wrap {text-align:left;}
	
}


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

@media only screen and (max-width: 400px) {
	
	.gallery-item {width:100% !important;}
	
	#footer .fr {padding-bottom:10px;}
	
	#footer .footer_nav > li {
		display:block;
		float:left;
		padding:0;
		width:45%;
	}
	
	.error h1 {font-size:10em;}
	
}


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

@media only screen and (max-width: 360px) {
	
	.header_inner {
		text-align:center;
		margin:0;
		padding:30px 0 0;
		overflow:hidden;
	}
	
	.logo {
		display:inline-block;
		float:none;
		margin:0;
		position:relative;
	}
	
	.responsive_nav {
		float:none;
		margin:30px auto 30px;
	}
	
	.error h1 {font-size:6em;}
	
	.comment-body .ovh,
	.widget div.ovh {overflow:visible;}
	
	#navigation ul li a span {min-height:18px;}
	
	#footer .footer_nav > li {
		float:none;
		width:auto;
	}
	
	ul.cmsms_details > li {
		padding-left:10px;
	}
	
}