/* =====================================================
   TECHQOR ULTRA LITE THEME
   RESPONSIVE CSS
===================================================== */


/* =====================================================
   TABLET (1023px and below)
===================================================== */

@media (max-width: 1023px) {

	.site-inner {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.content-sidebar-wrap {
		flex-direction: column;
	}

	.content {
		width: 100%;
	}

	.sidebar,
	.sidebar-primary {
		width: 100%;
	}

	.sidebar .widget,
	.sidebar-primary .widget {
		margin-bottom: 24px;
	}

	.entry-title {
		font-size: 26px;
	}

}


/* =====================================================
   MOBILE (767px and below)
===================================================== */

@media (max-width: 767px) {

	.site-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-header .wrap {
		min-height: 60px;
	}

	.site-title {
		font-size: 20px;
	}

	.site-description {
		display: none;
	}

	.entry-title {
		font-size: 22px;
	}

	h1 {
		font-size: 28px;
	}

	h2 {
		font-size: 24px;
	}

	h3 {
		font-size: 20px;
	}

	p {
		font-size: 15px;
	}

}


/* =====================================================
   MOBILE NAVIGATION
===================================================== */

@media (max-width: 767px) {

	.nav-primary .wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.genesis-nav-menu {
		flex-direction: column;
		width: 100%;
		display: none;
		border-top: 1px solid var(--tq-border);
	}

	.genesis-nav-menu .menu-item {
		width: 100%;
	}

	.genesis-nav-menu a {
		padding: 14px 12px;
		border-bottom: 1px solid var(--tq-border);
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 12px 0;
		padding: 10px 16px;
		background: var(--tq-primary);
		color: #ffffff;
		border: none;
		border-radius: var(--tq-radius-sm);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.menu-toggle:hover {
		background: #1785c7;
	}

	.genesis-responsive-menu.active .genesis-nav-menu {
		display: flex;
	}

}


/* =====================================================
   SUBMENU MOBILE
===================================================== */

@media (max-width: 767px) {

	.genesis-nav-menu .sub-menu {
		position: static;
		display: none;
		border: none;
		box-shadow: none;
		padding: 0;
	}

	.genesis-nav-menu .menu-item.open > .sub-menu {
		display: block;
	}

	.genesis-nav-menu .sub-menu a {
		padding-left: 24px;
		font-size: 14px;
	}

}
.sub-menu-toggle {
	display: none;
}

@media (max-width: 767px) {

	.genesis-nav-menu .menu-item-has-children {
		position: relative;
	}

	.sub-menu-toggle {
		position: absolute;
		top: 8px;
		right: 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		background: transparent;
		color: var(--tq-heading);
		border: 1px solid var(--tq-border);
		border-radius: var(--tq-radius-sm);
		cursor: pointer;
		line-height: 1;
	}

	.sub-menu-toggle:hover,
	.sub-menu-toggle:focus {
		background: var(--tq-light-bg);
	}

	.genesis-nav-menu .menu-item-has-children > a {
		padding-right: 54px;
	}
}

/* =====================================================
   IMAGES
===================================================== */

@media (max-width: 767px) {

	.entry-image,
	.post-image,
	.wp-post-image {
		border-radius: var(--tq-radius-sm);
	}

}


/* =====================================================
   FOOTER WIDGETS
===================================================== */

@media (max-width: 900px) {

	.footer-widgets .wrap {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 600px) {

	.footer-widgets .wrap {
		grid-template-columns: 1fr;
	}

}


/* =====================================================
   TABLES MOBILE SCROLL
===================================================== */

@media (max-width: 767px) {

	.entry-content table {
		display: block;
		overflow-x: auto;
	}

}


/* =====================================================
   ALIGNMENTS FIX
===================================================== */

@media (max-width: 767px) {

	.alignleft,
	.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}

}