/* Mobile layer for cielobuio.org. Desktop (over 800px) is unchanged. */

.cb-table-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cb-subtoggle {
	display: none;
}

@media (max-width: 800px) {
	#branding {
		height: auto;
		min-height: 0;
		padding: 8px 0 4px;
	}

	#header-container > div {
		margin-top: 6px;
	}

	#site-title,
	#site-description {
		margin-left: 12px;
		margin-right: 12px;
	}

	#site-title span a {
		font-size: 26px;
		line-height: 1.15;
	}

	#site-description {
		margin-top: 4px;
		font-size: 14px;
		line-height: 1.35;
	}

	#header-widget-area {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		margin: 6px 0 2px;
		padding: 0 12px;
		box-sizing: border-box;
	}

	#header-widget-area .widget-title {
		display: none;
	}

	#header-widget-area .searchform {
		max-width: none;
		margin: 0;
	}

	#header-widget-area .searchform input[type="search"] {
		height: 42px;
		font-size: 16px;
		line-height: 1.2;
		padding: 0 48px 0 12px;
	}

	#nav-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		float: none;
		width: 100%;
		height: 48px;
		margin: 0;
		padding: 0 16px;
		box-sizing: border-box;
		text-decoration: none;
	}

	#nav-toggle span {
		display: block;
		line-height: 48px;
	}

	#nav-toggle span:before {
		font-size: 18px;
		line-height: 48px;
		height: 48px;
	}

	#nav-toggle:after {
		content: "Menu";
		color: inherit;
		font-family: "Open Sans", sans-serif;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.02em;
		line-height: 48px;
	}

	#nav-toggle.is-open:after {
		content: "Chiudi";
	}

	#access {
		display: none;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0 0 8px;
	}

	#access .menu-header,
	#access div.menu {
		margin: 0;
	}

	#access > .menu > ul {
		margin-left: 0;
	}

	#access ul li {
		float: none;
		width: 100%;
		white-space: normal;
	}

	#access a {
		font-size: 16px;
		letter-spacing: 0;
	}

	#access a > span,
	#access ul ul li a span {
		padding: 14px 52px 14px 16px;
		min-height: 48px;
		box-sizing: border-box;
		line-height: 1.3;
		text-align: left;
	}

	#access ul ul {
		position: static;
		min-width: 0;
		width: 100%;
		height: auto;
		background: rgba(0, 0, 0, 0.22);
	}

	#access ul ul li {
		float: none;
		display: block;
		width: 100%;
		clear: both;
	}

	#access ul ul a > span,
	#access ul ul li a span {
		padding-left: 28px;
	}

	#access ul li:hover > ul,
	#access ul li:hover > ul.sub-menu {
		display: none;
	}

	#access ul li.menu-item.is-open > ul.sub-menu {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		margin-left: 0 !important;
		height: auto !important;
	}

	#access > .menu ul li > a:not(:only-child) span:after,
	#access > .menu > ul ul > li a:not(:only-child) span:after {
		content: none;
		display: none;
	}

	#access li.current-menu-item > a,
	#access li.current-menu-ancestor > a,
	#access li.current_page_item > a {
		background: rgba(255, 255, 255, 0.06);
	}

	#access li.current-menu-item > a span,
	#access li.current_page_item > a span {
		color: #ffd677;
	}

	.cb-subtoggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 6;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: #d0d0d0;
		cursor: pointer;
	}

	.cb-subtoggle:before {
		content: "";
		display: block;
		width: 9px;
		height: 9px;
		margin: 16px auto 0;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	li.is-open > .cb-subtoggle:before {
		margin-top: 20px;
		transform: rotate(-135deg);
	}

	#breadcrumbs {
		padding: 8px 12px;
		font-size: 14px;
		line-height: 1.4;
		overflow-wrap: break-word;
	}

	#breadcrumbs-box {
		padding: 0;
	}

	body,
	#content,
	#content p,
	#content ul,
	#content ol,
	#content dd,
	#content blockquote,
	.column-text,
	.ppbox {
		font-size: 17px;
		line-height: 1.55;
	}

	#content {
		padding: 12px 14px;
		box-sizing: border-box;
	}

	.archive #content .entry-title,
	.blog #content .entry-title,
	.search #content .entry-title,
	.category #content .entry-title {
		font-size: 1.45rem;
		line-height: 1.25;
		letter-spacing: 0;
	}

	.single #content .entry-title,
	.page #content .entry-title {
		font-size: 1.75rem;
		line-height: 1.22;
		letter-spacing: 0;
	}

	#content h1,
	#content h2,
	#content h3,
	#content h4 {
		letter-spacing: 0;
		line-height: 1.25;
	}

	#content img,
	#content iframe,
	#content video,
	#content embed,
	#content object,
	#content .wp-caption,
	#content .wp-caption img {
		max-width: 100%;
		height: auto;
	}

	#content .wp-caption {
		width: auto !important;
	}

	#content table img {
		max-width: 100%;
		height: auto;
	}

	#content img.alignleft:hover,
	#content img.alignright:hover,
	#content img.aligncenter:hover,
	#content img.alignnone:hover,
	#content .wp-caption img:hover {
		opacity: 1;
	}

	#content pre,
	#content code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.archive .entry-summary > a,
	.blog .entry-summary > a,
	.search .entry-summary > a,
	.category .entry-summary > a,
	.home .entry-summary > a {
		display: block;
	}

	#content .entry-summary img.alignleft,
	#content .entry-summary img.alignright,
	#content .entry-summary img.post_thumbnail {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 0 12px;
	}

	.widget_weblizar_facebook_likebox,
	#weblizar_facebook_likebox-4,
	#weblizar_facebook_likebox-5,
	#meta-2,
	#archives-2 {
		display: none;
	}

	#forbottom #frontpage #front-columns > div {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	#front-columns .column-text {
		text-align: left;
	}

	#pp-texttop table,
	#pp-textmiddle table,
	#pp-textbottom table,
	.ppbox table {
		display: block;
		width: 100% !important;
		overflow: visible;
	}

	#pp-texttop table tbody,
	#pp-texttop table tr,
	#pp-texttop table td,
	#pp-textmiddle table tbody,
	#pp-textmiddle table tr,
	#pp-textmiddle table td,
	#pp-textbottom table tbody,
	#pp-textbottom table tr,
	#pp-textbottom table td,
	.ppbox table tbody,
	.ppbox table tr,
	.ppbox table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	.ppbox table img,
	#pp-texttop img,
	#pp-textmiddle img,
	#pp-textbottom img {
		display: block;
		float: none;
		width: auto !important;
		max-width: 180px !important;
		height: auto !important;
		margin: 4px auto 12px;
	}

	#pp-texttop,
	#pp-textmiddle,
	#pp-textbottom,
	#front-columns-box,
	#pp-afterslider #content {
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.slider-wrapper,
	#slider.nivoSlider {
		position: relative;
	}

	/* The slides are 1920x550, so on a phone the photo is a short strip.
	   A caption over that strip covers it and gets clipped. Keep the photo,
	   and put a dark caption directly underneath. */
	#slider.nivoSlider {
		overflow: visible;
		margin-bottom: 12.5rem;
	}

	.theme-default .nivo-controlNav {
		top: auto;
		bottom: 8px;
	}

	.nivo-caption {
		position: absolute;
		top: 100%;
		right: 0;
		bottom: auto;
		left: 0;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 14px 14px 16px;
		box-sizing: border-box;
		background: #141414;
		color: #fff;
		text-align: center;
	}

	.nivo-caption h2,
	.nivo-caption .slide-text,
	.nivo-caption .inline-slide-text,
	.nivo-caption a {
		color: #fff;
		background: none;
		box-shadow: none;
		text-shadow: none;
		letter-spacing: 0;
	}

	.nivo-caption h2 {
		display: block;
		font-size: 22px;
		line-height: 1.2;
	}

	.nivo-caption .slide-text,
	.slide-text {
		width: 100%;
		font-size: 15px;
		line-height: 1.4;
	}

	.nivo-caption .readmore {
		border-color: rgba(255, 255, 255, 0.75);
	}

	#frontpage .theme-default .nivoSlider .readmore a {
		color: #fff;
		border-color: rgba(255, 255, 255, 0.75);
	}
}