/**
 * @package WordPress
 * @subpackage Cleverminds
 * @since Cleverminds 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) {
	
	#top, 
	#middle,
	.header_inner,
	.headline_outer,
	.bottom_outer, 
	.footer_outer,
	.cmsms_top_left_line,
	.cmsms_top_right_line,
	.cmsms_bot_left_line,
	.cmsms_bot_right_line,
	.header_html_outer,
	.fixed_header .header_outer, 
	.fixed_header .header_outer:before,
	.fixed_header .header_outer:after,
	.fixed_header .header_outer_1:before,
	.fixed_header .header_outer_1:after {width:1240px;}
	
	.cmsms_top_left_line,
	.cmsms_bot_left_line,
	.fixed_header .header_outer:before,
	#header.fixed_header .header_outer_1:before {left:-1240px;}
	
	.cmsms_top_right_line,
	.cmsms_bot_right_line,
	.fixed_header .header_outer:after,
	#header.fixed_header .header_outer_1:after {right:-1240px;}
	
	.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;}
	
	.comment-reply-link,
	#comments .comment-body .published,
	.comment-body h4 {
		display:block;
		float:none;
		clear:both;
		padding-left:0;
	}
	
	.comment-reply-link {display:inline-block;}
	
}


/* ---------- 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;
	}
	
	.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) {
	
	#top, 
	#middle,
	.header_inner,
	.headline_outer,
	.bottom_outer, 
	.footer_outer,
	.cmsms_top_left_line,
	.cmsms_top_right_line,
	.cmsms_bot_left_line,
	.cmsms_bot_right_line,
	.header_html_outer,
	.fixed_header .header_outer, 
	.fixed_header .header_outer:before,
	.fixed_header .header_outer:after,
	.fixed_header .header_outer_1:before,
	.fixed_header .header_outer_1:after {width:90%;}
	
	.cmsms_top_left_line,
	.cmsms_bot_left_line,
	.fixed_header .header_outer:before,
	.fixed_header .header_outer_1:before {left:-90%;}
	
	.cmsms_top_right_line,
	.cmsms_bot_right_line,
	.fixed_header .header_outer:after,
	.fixed_header .header_outer_1:after {right:-90%;}
	
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6 {word-wrap:break-word;}
	
	.portfolio .project .project_inner .entry-meta {margin-top:-130%;}
	
}

/* ---------- 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;
		height:auto !important;
	}
	
	#page #header > .header_inner > a.logo {
		left:0;
		top:0;
	}
	
	.logo {
		display:block;
		margin:22px 0 30px 40px;
		float:left;
		position:relative;
		left:0;
		top:0;
	}
	
	.responsive_nav  {
		background-image:url(../img/resp_nav_but_grad.png);
		background-repeat:repeat-x;
		background-position:0 0;
		background-color:#2fb9d0;
		display:block;
		width:46px;
		height:28px;
		float:right;
		margin:26px 35px 25px 0;
		-webkit-border-radius:15px;
		-moz-border-radius:15px;
		border-radius:15px;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
	}
	
	html.csstransitions .responsive_nav {
		-webkit-transition:all .2s ease-in-out;
		-moz-transition:all .2s ease-in-out;
		-ms-transition:background-position .3s ease-in-out;
		-o-transition:background-position .3s ease-in-out;
		transition:all .2s ease-in-out;
	}
	
	.responsive_nav:hover {background-position:0 100%;}
	
	#page .responsive_nav.active {
		background-image:none;
		background-color:#373737;
		-webkit-box-shadow:-1px -1px 0 rgba(0, 0, 0, .2),
					inset -1px -1px 0 rgba(255, 255, 255, .09);
		-moz-box-shadow:-1px -1px 0 rgba(0, 0, 0, .2),
					inset -1px -1px 0 rgba(255, 255, 255, .09);
		box-shadow:-1px -1px 0 rgba(0, 0, 0, .2),
					inset -1px -1px 0 rgba(255, 255, 255, .09);
	}
	
	.responsive_nav span {
		background:url(../img/resp_nav_but_bg.png) no-repeat 50% 50%;
		display:block;
		width:46px;
		height:28px;
	}
	
	#header nav {
		display:block;
		clear:both;
		margin:0 -5px;
		overflow:hidden;
		position:relative;
	}
	
	#navigation {
		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, 
	#navigation > li {
		float:none;
		margin:0;
	}
	
	#navigation li a,
	#navigation ul li a {
		background:#454545;
		color:#ffffff;
		font-size:14px;
		text-transform:none;
		font-weight:normal;
		margin-bottom:2px;
	}

	#navigation > li > a {
		background:#454545;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
	}

	html.csstransitions #navigation > li > a,
	html.csstransitions #navigation li a,
	html.csstransitions #navigation ul li a {
		-webkit-transition:background-color .3s ease-in-out;
		-moz-transition:background-color .3s ease-in-out;
		-ms-transition:background-color .3s ease-in-out;
		-o-transition:background-color .3s ease-in-out;
		transition:background-color .3s ease-in-out;	
	}

	#navigation > li:hover > a,
	#navigation > li > a:hover,
	#navigation > li.current_page_item > a,
	#navigation > li.current_page_ancestor > a,
	#navigation > li.current-menu-ancestor > a {
		background:#2fb9d0;
		color:#ffffff;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
	}

	#navigation > li.dropdown > a:hover,
	#navigation > li.dropdown:hover > a {
		background:#2fb9d0;
		color:#ffffff;
		margin:0 0 2px 0;
		padding:0;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
	}

	#navigation ul {
		background:none;
		display:none;
		margin:0;
		padding:0;
		visibility:visible;
		position:relative;
		left:auto;
		top:auto;
		opacity:1;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
	}

	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;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius:0;
	}

	#navigation ul li:hover > ul {margin:0;}

	#navigation ul li a {
		text-align:left;
		display:block;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	#navigation > li > a > span, 
	#navigation ul li a span {
		text-align:left;
		min-width:1px;
		padding:12px 55px 12px 40px;
	}
	
	#navigation ul li a span {padding-left:70px;}
	
	#navigation ul ul li a span {padding-left:100px;}
	
	#navigation ul ul ul li a span {padding-left:130px;}

	#page #navigation li.dropdown > a > span:before {
		content:'';
		background:url(../img/resp_nav_arrow.png) no-repeat 50% 0;
		width:7px;
		height:7px;
		position:absolute;
		right:40px;
		top:18px;
		-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;
	}
	
	#page #navigation li.dropdown > a.drop_active > span:before {background-position:50% 100%;}
	
	.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.lpr .tabs li {
		display:block;
		width:auto;
		float:none;
		margin:0;
	}
	
	.tab.lpr .tabs li + li + li {width:32%;}
	
	.tab.lpr .tab_content .ovh {overflow:visible;}
	
	.portfolio .project .project_inner .entry-meta {margin-top:-180%;}
	
	.project_content,
	.project_sidebar {
		float:none;
		width:100%;
	}
	
	.footer_inner {text-align:center;}
	
	#footer .footer_inner > .copyright {
		float:none;
		text-align:center;
	}
	
	#footer .footer_nav {
		text-align:center;
		float:none;
		margin:0;
		padding:15px 0 0;
		overflow:hidden;
		clear:both;
	}
	
	#footer .social_icons {
		display:inline-block;
		float:none;
	}
	
	#footer .social_icons {margin:20px 0 -10px;}
	
}

@media only screen and (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 2) {

	#page #navigation li.dropdown > a > span:before {
		background-image:url(../img/retina/resp_nav_arrow@2x.png);
		background-size:7px 21px; 
	}
	
	.responsive_nav span {
		background-image:url(../img/retina/resp_nav_but_bg@2x.png);
		background-size:20px 10px; 
	}
	
	.responsive_nav {
		background-image:url(../img/retina/resp_nav_but_grad@2x.png);
		background-size:105px 56px; 
	}
	
}

/* ---------- Small Tablet & Mobile (Note: Design for a width less than 768px) ---------- */

@media only screen and (max-width: 767px) {

	.container {overflow:hidden;}
	
	#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,
	.content_wrap.l_sidebar #content {padding-bottom:40px;}
	
	#sidebar,
	.content_wrap.l_sidebar #sidebar {padding-top:40px;}
	
	#sidebar:before {
		content:'';
		background:#e3e3e3;
		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, 
	.opened-article .project.cmsms_two .resize > figure, 
	.opened-article .project.cmsms_three .resize > figure, 
	.format-album.cmsms_two .resize figure, 
	.format-album.cmsms_three .resize figure {
		float:none;
		padding-right:0;
		width:100%;
	}
	
	.error h1 {font-size:14em;}
	
	.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 p {padding-bottom:20px;}
	
	.tab.lpr .tab_content .ovh {overflow:hidden;}
	
	.wrap_lay_slider .button {display:none;}
	
	.portfolio .project .project_inner .entry-meta {margin-top:-130%;}
	
	.splash .wrap_rev_slider .tp-bullets.simplebullets.round {margin-left:17% !important;}
	
	.tab.lpr .tabs li,
	.tab.lpr .tabs li + li + li {width:100%;}
	
	.share_posts .fl {margin-bottom:20px;}
	
}

/* ---------- 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,
	.post_type_shortcode.four_columns, 
	.post_type_shortcode.two_columns, 
	.portfolio.two_columns .project, 
	.portfolio.four_columns {margin-right:0;}
	
	.headline_inner,
	.middle_inner,
	.bottom_inner,
	.footer_inner,
	.header_html_inner {
		padding-left:20px;
		padding-right:20px;
	}
	
	.error .search_line {width:100%;}
	
	.error h1 {font-size:9em;}
	
	select {width:200px;}
	
	.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_sort {padding:0 0 0 20px;}
	
	.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;
	}
	
	.tour,
	.tour_box_content {
		width:100%;
		float:none;
	}
	
	.tab .tabs li {
		float:none;
		margin:0;
	}
	
	.post .cmsms_post_info, 
	.archive .project .cmsms_post_info {
		float:none;
		width:100%;
		margin-right:0;
		padding-left:0;
	}
	
	.post .cmsms_post_info .wrap_post_date, 
	.archive .project .cmsms_post_info .wrap_post_date {margin-left:0;}
	
	.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;}
	
	.testimonials .testimonial .tl-content blockquote {padding:70px 25px 25px;}
	
	.testimonials .testimonial .button {
		float:left;
		clear:both;
	}
	
	.testimonial .published {float:left;}
	
	.comment-reply-link,
	#comments .comment-body .published,
	.comment-body h4 {
		display:block;
		float:none;
		clear:both;
		padding-left:0;
	}
	
	.comment-reply-link {display:inline-block;}
	
	.splash .wrap_rev_slider .tp-bullets.simplebullets.round {margin-left:10% !important;}
	
}


/* ---------- Mobile (Note: Design for a width less than 401px) ---------- */

@media only screen and (max-width: 400px) {
	
	.gallery-item {width:100% !important;}
	
	#footer .footer_nav > li {
		display:block;
		float:left;
		padding:0;
		width:45%;
	}
	
	.error h1 {font-size:8em;}
	
	.header_inner {
		text-align:center;
		padding-top:22px;
	}
	
	.logo {
		display:inline-block;
		float:none;
		margin:0;
		position:relative;
	}
	
	.responsive_nav {
		float:none;
		margin:25px auto 30px;
	}
	
	div.pj_filter {padding:0 0 0 20px;}
	
	.portfolio .project .project_inner .entry-meta {margin-top:-150%;}
	
	.related_posts ul li {
		float:none;
		margin:0;
	}
	
	.related_posts ul li a {width:100%;}
	
	.splash .wrap_rev_slider .tp-bullets.simplebullets.round {margin-left:0 !important;}
	
}


/* ---------- Mobile (Note: Design for a width less than 360px) ---------- */

@media only screen and (max-width: 360px) {
	
	.error h1 {font-size:5em;}
	
	.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;}
	
	.pj_sort,
	div.pj_filter {
		float:left;
		padding:0;
	}
	
	.portfolio .project .project_inner .entry-meta {margin-top:-200%;}
	
	.tab.lpr .tab_content .ovh {overflow:visible;}
	
	.splash .wrap_rev_slider .tp-bullets.simplebullets.round {margin-left:-10% !important;}
	
}

