/**
 * @package NightBreeze SMF Theme
 * @author SychO (M.S) https://sycho9.github.io
 * @version 2.0
 *
 * @license Copyright (C) 2020 SychO (M.S)
 * This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 * You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
 * LICENSE.TXT
 *
 * version 2.0
*/
/* Tablet-->Mobile.
-------------------- */
@media (max-width: 768px) {
	@import "https://fonts.googleapis.com/css?family=Roboto:400,600,700";
	/* Classes To Be Remembered.
	---------------------------- */
	.taphoNone {display: none}
	.taphoOnly {display: block}
	.taphoOnlyInline {display: inline-block}
	.sampleClass{float:none;display:none;}
	/* Full Width */
	.boardindex_block, nav .dropmenu li ul, #admin_content #quick_tasks li, #admin_content #live_news, #admin_content #supportVersionsTable,
	#admin_content .modblock_left, #admin_content .modblock_right {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		transform: none;
		top: 0;
		left: 0;
		margin: 0 0;
		float: none;
	}
	/* Remove */
	table.table_list tbody.content td.stats {
		display: none;
	}
	/* Little Menues */
	.phoneVflow {
    overflow: visible;
	}
	.phoneListpapa {
		position: relative;
		overflow: visible;
		background: transparent;
		float: right;
		z-index: 1;
	}
	.phoneList, ul.phoneList, ul.quickbuttons.phoneList {
		position: absolute;
		padding: 0;
		top: 30px;
		right: 1px;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		-o-border-radius: 3px;
		overflow: hidden;
		height: 0;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-o-transition: all .25s ease;
		-ms-transition: all .25s ease;
		transition: all .25s ease;
	}
	.phoneListpapa:hover .phoneList {
		height: auto;
	}
	.phoneList li:not(.inline_mod_check), ul.phoneList li:not(.inline_mod_check), ul.quickbuttons.phoneList li:not(.inline_mod_check) {
		float: none;
		display: block;
		margin: 0;
	}
	.phoneList li a, ul.phoneList li a, ul.quickbuttons.phoneList li a {
		padding: 8px 12px;
		background: #444444;
		color: #dbdbdb;
		float: none;
		text-align: left;
		white-space: nowrap;
	}
	.phoneList li a:before, ul.phoneList li a:before, ul.quickbuttons.phoneList li a:before {
		font-size: 12px;
	}
	.phoneList li a:hover, ul.phoneList li a:hover, ul.quickbuttons.phoneList li a:hover {
		background: #1d1d1d;
		color: white;
	}
	ul.quickbuttons.phoneList li.inline_mod_check {
		display: none;
	} form[name="pmFolder"] .post {
		margin-top: 4.5em;
	}
	/* Header.
	----------------- */
	header {z-index: 1; position:relative}
	header nav {
		position: fixed;
		width: 55%;
		box-sizing: border-box;
		float: none;
		right: -100%;
		background: #0a101c;
		z-index: 99;
		height: 100%;
		overflow: auto;
		padding-bottom: 2em;
		top: 0;
	}
	header nav .dropmenu>li {
		float: none;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
	}
	header nav .dropmenu>li>a.firstlevel>i {
		padding: 0 0;
		width: 31px;
	}
	header nav .dropmenu>li a.firstlevel {
		line-height: 37px;
		border-left: 4px solid rgba(255, 255, 255, 0.36) !important;
		margin: 3px 4px;
		padding: 8px 10px;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		background: transparent;
	}
	header nav .dropmenu>li:hover a.firstlevel, header nav .dropmenu>li a.firstlevel:active {
		border-left-color: white !important;
		background: #070b14;
	}
	nav .dropmenu li a.firstlevel i, .dropmenu li a.firstlevel span.firstlevel {
		display: inline-block;
	} nav .dropmenu li ul {
		overflow: hidden;
		transition: all 0.8s;
		-webkit-transition: all 0.8s;
		-moz-transition: all 0.8s;
		-ms-transition: all 0.8s;
		-o-transition: all 0.8s;
		margin: -4px 0px 4px !important;
		padding: 0;
	} nav .dropmenu li ul li a {
		background: #060a12;
		z-index: 0 !important;
		margin: 0 4px;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
	} nav .dropmenu li ul.openEd {
		padding: 0px 0 2em;
	} header nav .dropmenu li a.active {
		border-left: 5px solid white !important;
		background: #121d32;
	}.dropmenu li ul {
		transition: all 0.8s;
		-webkit-transition: all 0.8s;
		-moz-transition: all 0.8s;
		-ms-transition: all 0.8s;
		-o-transition: all 0.8s;
	} .dropmenu li:hover>ul {
		animation: none;
		height: auto;
	}
	h1.forumtitle a.imgHeader img {
		max-width: 100%;
	}
	table.table_list tbody.content td.icon {
		width: 2%;
	}
	table.table_list tbody.content td.icon img {
		width: 35px;
	} form, .content, #main_content_section, #main_grid {
		overflow-x: auto;
	}
	#forumposts h3 span#author {
		display: none;
	}
	#forumposts .cat_bar:first-of-type {
		overflow: visible;
		height: auto;
	}
	#forumposts .cat_bar:first-of-type h3 {
		overflow: visible;
		height: auto;
		line-height: 23px;
		padding: 6px 10px;
	} #forumposts h3 img {
		margin: 1px 0.5em 0 0;
	} form#postmodify .roundframe {
		padding: 8px 10px;
	} #edit_poll fieldset input {
		display: block;
		box-sizing: border-box;
		width: 100%;
		margin: 0 !important;
	}
	#edit_poll ul.poll_main li {
		padding: 0;
	}
	#edit_poll ul.poll_main {
		padding: 0;
	}
}

/* Mobile Only.
------------------ */
@media only screen and (max-width: 425px) {
	/* Display None */
	.poster li.postcount,.poster li.karma,.poster li.gender, .poster li.karma_allow, .poster li.stars, .poster li.blurb, .side_icon,
	table.table_list tbody.content td.lastpost, .phoneNone, .navigate_section ul li:not(.last) div.cust, .signature, li.title,
	.user .dropmenu li a.firstlevel span:not(.spshl), .topic_table td.stats, .topic_table td.lastpost, ul.quickbuttons li.inline_mod_check,
	#notification_list form:first-of-type th:nth-child(2), #notification_list form:first-of-type th:nth-child(3),
	#notification_list form:first-of-type td:nth-child(2), #notification_list form:first-of-type td:nth-child(3)	{
		display: none;
	}
	.phoneOnly {display: block;} .phoneOnlyInline {display: inline-block;}
	/* Full Width */
	#left_admsection, #main_admsection, .righter, .lefter, .middler, .poster, .postarea, .post_wrapper .keyinfo, header nav .dropmenu>li>ul, .buttonlist,
	div#upper_section div.user, div#upper_section div.news, div#detailedinfo, div#basicinfo, #upper_section h1.forumtitle,
	.login, #month_grid, #stats_left, #top_posters, #top_topics_replies, #top_topics_starter, #stats_right, #top_boards, #top_topics_views, #most_online {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		transform: none;
		top: 0;
		left: 0;
		margin: 0 0;
		float: none;
	}
	/* Clear */
	#admin_menu, .phoneClear {clear:both;}
	/* Force Full Width */
	dl:not(.phoneDL):not(.stats) dt, dl:not(.phoneDL):not(.stats) dd, #main_grid {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		box-sizing: border-box !important;
		transform: none !important;
		top: 0 !important;
		left: 0 !important;
		margin: 0 0 !important;
		float: none !important;
		text-align: left;
	}
	.login dd input {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	/* Full Width Tables */
	#month_grid table {
		display: table;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		transform: none;
		top: 0;
		left: 0;
		margin: 0 0;
		float: none;
	}
	/* Icons Only */
	.buttonlist ul li a span {
		display: none;
	} .buttonlist ul li a:before {
		margin: 0;
		line-height: 40px;
		font-size: 19px;
	} .buttonlist ul li a {
		padding: 0;
		width: 40px;
		text-align: center;
	} .buttonlist {
		margin: 0;
		text-align: center;
	} .buttonlist ul {
		margin: 0;
		padding: 6px 0;
		float: right;
	} .buttonlist ul li {
		float: none;
		display: inline-block;
	}
	.sampleClass {float:none;display:none;}
	/* Clear View */
	.poster:after {
		content: "";
		display:block;
		clear: both;
	}
	/* Spacing Elements */
	dl:not(.phoneDL):not(.stats) dt {margin: 10px 0 5px;} /* The Ez Way */
	dl:not(.phoneDL):not(.stats) dt {margin: 10px 0 5px !important;} /* The Hard Way */
	dl.stats dd, dl.stats dt {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
	/* Header.
	-------------- */
	header nav {width: 100%;}
	#upper_section {
		margin: 0 5px;
	}
	#top_section {
		padding: 0;
	} h1.forumtitle .side_icon {
		display: block !important;
		margin: 0 auto;
	}
	h1.forumtitle {
		padding: 0 0 0 8px;
	} div#upper_section div.news {
		font-size: 11px;
		text-align: center;
		display: none;
	} #upper_section {
		height: auto;
		padding: 0;
	} #upper_section h1.forumtitle {
		max-width: unset;
		padding: 20px 0 25px;
		text-align: center;
	} .user .dropmenu li a.firstlevel>i {
		padding: 0;
		line-height: 52px;
		width: 30px;
	}
	/* Main.
	-------------- */
	main, .wrapper {position: relative;z-index: 0;width: 98%;}
	main>div.frame {
    padding: 8px 2px;
	}
	table.table_list td.info p.bdcrp {
		font-size: 11px;
	}
	.post {
		clear: both;
	}
	.poster {
		text-align: left;
		padding-bottom: 4px;
	}
	.poster div.avatar {
		float: left;
		margin: 0 8px 8px;
	}
	.poster .avatar img {
		width: 70px;
	}
	.poster li.profile {
		position: absolute;
		right: 5px;
		top: -12px;
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		-moz-writing-mode: vertical-rl;
		-ms-writing-mode: vertical-rl;
		-o-writing-mode: vertical-rl;
		height: 70px;
	} .poster li.profile a {
		margin: 0 1px;
	} .poster li.profile a img {
		vertical-align: text-top;
		padding: 6px;
	}
	ul.reset li.membergroup, ul.reset li.postgroup, .poster li.warning, #basicinfo h4 span.position {
		padding: 6px 10px;
		line-height: 13px;
	} .poster h4 {
		font-size: 15px;
		margin: 12px 0 1px;
	}
	.poster h4 img[alt="Online"], .poster h4 img[alt="Offline"] {
		width: 12px;
		margin-top: 3px;
		vertical-align: top;
	} .post_wrapper ul.quickbuttons {
		background: transparent;
		position: absolute;
	} .postarea div.flow_hidden {
		padding: 0;
	} .postarea {
		padding: 8px 10px 0;
	} .post_wrapper .keyinfo {
    	float: left;
    	width: auto;
	} .poster ul.greezeInsider {
		background: transparent;
		margin: 0;
		padding: 0;
	}
	/* Footer.
	-------------- */
	.righter, .lefter, .middler {
		margin: 7px 0;
		text-align: center;
		margin: 7px 0;
	}
	footer .frame.for_abt {
		font-size: 10px;
	}
	.fullscreen .fsInner {
		width: 100%;
		box-sizing: border-box;
	}
}

/* 320 Smallest Possible */
@media only screen and (max-width: 320px) {
	header .frame:before {
		background-size: auto 100%;
	}
}
/* TABLET.
-------------------------- */
@media only screen and (max-width: 768px) and (min-width: 425px) {
	/* Full Width */
	#upper_section h1.forumtitle {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		transform: none;
		top: 0;
		left: 0;
		margin: 0 0;
		float: none;
	}
	/* Remove */
	/* Header.
	--------------- */
	#upper_section div.news {
		right: 0;
	} #upper_section {
		height: auto;
		padding: 0;
		margin: 0 6px;
	} #upper_section h1.forumtitle {
		max-width: unset;
		padding: 20px 0 25px;
	}
	/* Main.
	------------- */
	table.table_list tbody.content td.lastpost {
		width: 33%;
	}
}
/* Special Queries.
--------------------- */
@media (max-width: 855px) {
	#basicinfo img.avatar {
		max-width:100%;
		max-height: 210px;
		min-width: unset;
	}
}
@media (max-width: 900px) {
	#moderationbuttons {
		clear: both;
	}
}
@media (max-width: 715px) {
	.post_wrapper .post {
		margin-top: 4em;
	}
}
@media (max-width: 565px) {
	table.table_list tbody.content td.lastpost {
		display:none;
	}
}
@media (max-width: 500px) {
	footer .for_abt div.ryo, footer .for_abt.single div.ryo {
		width: 100%;
		float: none;
	}
}
@media (max-width: 620px) {
	.righter, .lefter, .middler {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		transform: none;
		top: 0;
		left: 0;
		margin: 0 0;
		float: none;
		text-align: center;
		margin: 7px 0;
	}
}
/* SimplePortal Support.
------------------------ */
@media (max-width: 767px) {
	table#sp_main, table#sp_main>tbody>tr, table#sp_main>tbody>tr>td, table#sp_main>tbody {
		display: block;
		width: 100%;
		background: transparent;
		table-layout: unset;
	}
	table#sp_main {
		background: transparent;
	}
}
/* HD Screens .
---------------- */
@media only screen and (min-width: 1900px) {
	main, .wrapper {
		width: 65% !important;
	} .header_back {background-size: 100% !important;}
}