/*
 Theme Name: Easy
 Description: Responsive css
 Author: KhoThemes
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
General
Tablet & Small Desktop Widths
All Devices under 1000px
Phone Portrait + Landscape
Phone Portrait
All devices under 320px
Android Portrait

/*--------------------------------------------------------------
General
--------------------------------------------------------------*/
/*Mobile icon*/
.mobile-menu { display: none; float: right; height: 100%; margin-right: 20px; }
.mobile-menu a { color: #999; font-size: 16px; }
.mobile-menu a:hover { color: #fe5252; }
/*Mobile nav*/
.mobile-navigation { display: none; float: left; width: 100%; background-color: #222; padding: 0 20px; overflow: hidden; z-index: 100; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
.mobile-navigation ul { display: none; width: 100%; position: relative; margin: 0; }
.mobile-navigation ul li { position: relative; border-bottom: 1px solid #4f4f4f; }
.mobile-navigation ul li:last-child { border-bottom: 0; }
.mobile-navigation ul li.open-sub > ul { border-top: 1px solid #4f4f4f; }
.mobile-navigation ul li a { position: relative; display: block; font-size: 11px; color: #eee; padding: 10px 0; line-height: 26px; text-transform: uppercase; }
.mobile-navigation ul li a:hover, .mobile-navigation ul li.current-menu-item > a { color: #fe5252; }
.mobile-navigation ul li a i { padding-right: 5px; }
.mobile-navigation ul > li.has-sub.open-sub > .mobile-icon i.icon_plus, .mobile-navigation ul > li.has-sub > .mobile-icon i.icon_minus-06 { display: none; }
.mobile-navigation ul > li.has-sub.open-sub > .mobile-icon i.icon_minus-06 { display: inline-block; }
.mobile-navigation ul li.has-sub .mobile-icon { position: absolute; top: 0; right: 0; width: 50px; height: 46px; line-height: 46px; font-size: 20px; color: #999; text-align: right; cursor: pointer; z-index: 999; }
.mobile-navigation ul li ul li { margin-left: 20px; }
.mobile-navigation .search-form { line-height: 1; padding: 20px 0; }
.mobile-navigation .mobile-search { display: inline-block; position: relative; width: 100%; }
.mobile-navigation .mobile-search input { background: transparent; border-color: #4f4f4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.mobile-navigation .mobile-search button { position: absolute; top: 0; right: 0; width: 55px; height: 100%; background: transparent; color: #999; border: 0; padding: 0; margin: 0; text-align: center; }

/*--------------------------------------------------------------
Tablet & Small Desktop Widths
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) and (min-width: 999px) {
	/*General*/
	.tipsy { display: none !important; }
	.container { width: 940px; }
	/*Search menu*/
	li.search-form:hover .searchform-slide .search-field, li.search-form .searchform-slide.have-focus .search-field { padding: 0 13px; width: 200px; opacity: 1; }
	.searchform-slide .search-field { float: none; position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid rgba(0,0,0,0.2); min-height: 30px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
	/*Submenu*/
	.sub-menu { min-width: 150px; }
}
/*--------------------------------------------------------------
All Devices under 1000px
--------------------------------------------------------------*/
@media only screen and (max-width: 1000px) {
	/*General*/
	#site-navigation-wrap, .menu-right, .tipsy { display: none !important; }
	.mobile-navigation, .mobile-menu { display: inline-block; }
	.container { width: 90%; }
	/*Blog large*/
	.large-post .blog-date-and-comments, .large-post .blog-entry-content { float: none; width: 100%; }
	.large-post .blog-date-and-comments { margin: 15px 0; text-align: left; }
	.large-post .comments-box, .large-post .date-box { display: inline-block; min-width: 80px; text-align: center; }
	.large-post .comments-box { margin-top: 0; margin-left: 10px; }
	/*Calendar widget*/
	#wp-calendar td { padding: 3px; }
	/*Custom Menu widget*/
	.widget_nav_menu a { overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
	.widget_nav_menu ul ul li a, .widget_nav_menu ul ul ul li a { padding-left: 0; }
	.widget_nav_menu .sub-menu { min-width: 100%; }
}
/*--------------------------------------------------------------
Phone Portrait + Landscape
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	/*General*/
	.content-area, #sidebar { float: none; width: 100%; }
	#sidebar { margin-top: 50px; }
	/*Facebook widget*/
	.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
	/*Scroll top*/
	#scroll-top { right: 10px; bottom: 10px; }
	#scroll-top span { font-size: 20px; width: 30px; height: 30px; line-height: 28px; }
	/*bbPress*/
	#bbpress-forums #bbp-your-profile fieldset label[for] { float: none; width: 100%; padding: 0 0 10px; text-align: left; }
	#bbpress-forums #bbp-your-profile fieldset input, #bbpress-forums #bbp-your-profile fieldset textarea { width: 100%; }
	/*Footer columns*/
	#wrap #footer .footer-box { width: 50%; }
	#wrap #footer .footer-box:nth-child(3) { clear: both; }
}
/*--------------------------------------------------------------
Phone Portrait
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
	/*Title*/
	.page-header .container { display: block; height: auto !important; }
	.page-title-inner, .page-header.with-breadcrumbs .page-title-inner, .site-breadcrumbs { display: block; width: 100%; text-align: center; }
	.site-breadcrumbs { margin-top: 10px; }
	/*Tags post*/
	.post-tags, .social-sharing { float: none; width: 100%; }
	.social-sharing { text-align: left; }
	/*Comments posts*/
	#comments ul.children { margin-left: 0; }
	.comment-author .comment-link, .comment-author .comment-meta { display: block; float: none; }
	.comment-author .comment-meta { text-align: left; }
	/*Pagination*/
	.page-numbers a, .page-numbers span, .page-links span { width: 30px; height: 30px; line-height: 26px; margin: 0 5px 0 0; font-size: 14px; }
	/*Shop*/
	.es-row .product.span_1_of_2, .es-row .product.span_1_of_3, .es-row .product.span_1_of_4 { width: 100%; }
	/*Footer columns*/
	#wrap #footer .footer-box { width: 100%; }
}
/*--------------------------------------------------------------
All devices under 320px
--------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
	/*General*/
	#bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-meta,
	#bbpress-forums li.bbp-header li.bbp-forum-freshness, #bbpress-forums li.bbp-body li.bbp-forum-freshness, #bbpress-forums li.bbp-header li.bbp-topic-freshness,
	#bbpress-forums li.bbp-body li.bbp-topic-freshness { display: none; }
	/*Scroll top*/
	#scroll-top { right: 10px; bottom: 10px; }
	#scroll-top span { font-size: 15px; width: 25px; height: 25px; line-height: 23px; }
	/*bbPress*/
	#bbpress-forums li.bbp-header li.bbp-forum-info, #bbpress-forums li.bbp-header li.bbp-topic-title { text-align: left; text-transform: none; }
	#bbpress-forums li.bbp-header li.bbp-forum-info, #bbpress-forums li.bbp-body li.bbp-forum-info, #bbpress-forums li.bbp-header li.bbp-topic-title, #bbpress-forums li.bbp-body li.bbp-topic-title { width: 45%; }
}
/*--------------------------------------------------------------
Android Portrait
--------------------------------------------------------------*/
@media only screen and (max-width: 240px) {
	/*bbPress*/
	#bbpress-forums li.bbp-header li.bbp-forum-topic-count, #bbpress-forums li.bbp-header li.bbp-forum-reply-count, #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
	#bbpress-forums li.bbp-body li.bbp-forum-reply-count, #bbpress-forums li.bbp-header li.bbp-topic-voice-count, #bbpress-forums li.bbp-header li.bbp-topic-reply-count,
	#bbpress-forums li.bbp-body li.bbp-topic-voice-count, #bbpress-forums li.bbp-body li.bbp-topic-reply-count, #bbpress-forums li.bbp-footer div.bbp-reply-author,
	#bbpress-forums li.bbp-footer div.bbp-reply-content { width: 20%; }
}