/*
	Responsive overrides for the Plovdiv theme.
	Loaded after style.css, grid.css and plugin styles (see header.php).

	Breakpoints:
	  <= 1039px  fluid layout, stacked header, wrapping main menu (tablet)
	  <=  767px  single column (phone)
	  <=  480px  small phone tweaks
*/


/* Global
----------------------------------------------------------------------------------------------------*/

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

/* Main menu toggle, only shown on phones */
.menu-toggle {
	display: none;
}

/*
	Highlights slider arrows. Nivo hides them (inline display:none) until the mouse is over
	the slider, so on touch screens and narrow windows keep them always visible.
*/
@media (hover: none), (max-width: 1039px) {
	#slider .nivo-directionNav {
		display: block !important;
	}
}

/* Touch screens keep :hover on a tapped arrow, so keep the normal frame instead of the hover one */
@media (hover: none) {
	#slider a.nivo-prevNav:hover {
		background-position: 0 0;
	}
	#slider a.nivo-nextNav:hover {
		background-position: -36px 0;
	}
}

/* Smaller arrows flush with the slider edges on phones: the 72x70 sprite (four 36x35 frames) is scaled to 60x60 */
@media screen and (max-width: 767px) {
	#slider .nivo-directionNav a {
		width: 30px;
		height: 30px;
		background-size: 60px 60px;
	}
	#slider a.nivo-prevNav,
	#slider a.nivo-prevNav:hover {
		left: 0;
		background-position: 0 0;
	}
	#slider a.nivo-nextNav,
	#slider a.nivo-nextNav:hover {
		right: 0;
		background-position: -30px 0;
	}
}
@media screen and (max-width: 767px) and (hover: hover) {
	#slider a.nivo-prevNav:hover {
		background-position: 0 -30px;
	}
	#slider a.nivo-nextNav:hover {
		background-position: -30px -30px;
	}
}


/* Tablet (<= 1039px)
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1039px) {

	html,
	body {
		min-width: 0;
	}
	html{
		background: #195523;
	}
	#main {
		background: #fff;
	}
	.primary_content_wrap {
		background: #fff;
	}

	/* Grid */
	.container_24 {
		width: auto;
		padding: 0 12px;
	}
	.container_24 .grid_24 {
		display: block;
		float: none;
		width: auto;
		margin: 0;
	}
	.container_24 .grid_7,
	.container_24 .grid_7.grid_71 {
		width: 32% !important;
		margin: 0 2% 0 0 !important;
	}
	.container_24 .grid_17 {
		width: 66%;
		margin: 0;
	}

	/* Header */
	#header {
		height: auto;
		padding: 0 0 12px;
	}
	#header .grid_24 {
		position: relative;
	}
	.logo {
		width: auto;
		height: auto;
		margin: 10px 0;
	}
	.logo a {
		display: inline-flex;
		align-items: center;
	}
	.logo h1,
	.logo h2 {
		position: static;
		margin: 0 0 0 10px;
		font-size: 30px !important;
		line-height: 1.1em;
	}
	#header-widget {
		top: 10px;
		right: 0;
		padding: 0;
	}
	.socialmedia-buttons {
		margin-right: 15px;
	}
	#header-sidebar {
		top: 60px;
		right: 0;
	}
	#header-sidebar div {
		padding: 0;
	}
	#showBox {
		right: 0;
		width: 600px;
		max-width: calc(100vw - 24px);
		z-index: 100;
	}

	/*
		Main menu.
		On desktop the labels are part of menuBgr.png and the real links are transparent
		(see the opacity:0 rules for .sf-menu li#menu-item-* in style.css), so here the
		image is dropped and the links are shown and styled instead.
	*/
	nav.primary,
	nav.en {
		position: static;
		width: auto;
		min-height: 0;
		padding: 0;
		background: #fff;
		border: 1px solid #e9e9e9;
		border-radius: 3px;
	}
	nav.primary:after {
		content: "";
		display: block;
		clear: both;
	}
	nav.primary p {
		margin: 0;
		background: none;
	}
	nav.primary p a.homePage,
	nav.primary p a.homePage:hover,
	nav.primary p a.homePage:active {
		background: #fafafa url(images/homeMenuIcon.png) no-repeat 50% 50%;
		height: 44px;
		width: 46px;
	}
	#primary-menu #topnav {
		float: none;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		margin: 0;
		background: #fafafa;
	}
	#primary-menu #topnav > li {
		float: none;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		background: none !important;
	}
	#primary-menu #topnav > li > a {
		opacity: 1 !important;
		filter: none !important;
		height: 44px;
		padding: 0 14px;
		line-height: 44px;
		background: none !important;
		color: #195523;
		font-size: 13px;
		font-weight: bold;
	}
	#primary-menu #topnav > li > a:hover,
	#primary-menu #topnav > li > a:focus,
	#primary-menu #topnav > li.sfHover > a,
	#primary-menu #topnav > li.current-menu-item > a,
	#primary-menu #topnav > li.current-page-ancestor > a {
		background: #50aa60 !important;
		color: #fff;
	}
	#primary-menu .sf-menu li:hover ul,
	#primary-menu .sf-menu li.sfHover ul {
		top: 44px;
	}

	/* Home: slider and tabs */
	#slider-wrapper,
	#tabs-content {
		width: auto;
		height: auto;
		margin: 0 0 16px;
		padding: 12px;
		background: #fcfcfc;
		border: 1px solid #e9e9e9;
		border-radius: 3px;
		box-sizing: border-box;
	}
	#tabs-content .inner {
		padding: 0;
		background: none;
	}
	#slider-wrapper .headerSlider {
		width: auto;
	}

	/*
		Nivo sizes its slider to the 600x400 images and paints the current image, its
		transition slices and boxes as unscaled backgrounds. Scale them all to the slider:
		the slider is a size container, so 100cqw is its width inside the slices/boxes.
	*/
	#slider,
	#slider.nivoSlider {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 2;
		container-type: inline-size;
		background-size: 100% 100% !important;
	}
	#slider .nivo-slice,
	#slider .nivo-box {
		background-size: 100cqw calc(100cqw * 2 / 3) !important;
	}
	.nivo-caption {
		width: auto;
		height: auto;
		top: auto;
		right: 0;
		bottom: 0;
		padding: 8px 12px;
	}
	.nivo-caption p {
		padding: 0 !important;
	}
	.nivo-caption p strong {
		width: auto;
		font-size: 22px;
        line-height: 1.3;
        padding-bottom: 2px;
	}
	.tw-content {
		width: auto !important;
		padding: 0 10px;
	}
	.tw-tabbed-nav {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tw-tabbed-nav li {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.latestpost li {
		width: 48%;
	}
	.latestpost li.even {
		padding: 0;
		margin-right: 4% !important;
	}

	/*
		Banner tiles at the bottom (.g-slider). The plugin lays itself out in pixels when it
		starts, so js/preview.js passes it a column count and tile size that fit the container.
		Here the container is made fluid and the 225x150 images are scaled into the smaller tiles.
		Selectors start with "body" because grid-slider.css is loaded later, in the footer.
	*/
	.primary_content_wrap .container {
		width: auto;
	}
	body .g-slider {
		margin-left: auto;
		margin-right: auto;
	}
	body .g-slider .tiles li li img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Sidebar: category tiles, three per row, equal height */
	#sidebar ul.cat {
		display: flex;
		width: 100%;
	}
	#sidebar ul.cat li,
	#sidebar ul.cat li.right {
		float: none;
		flex: 1 1 0;
		width: auto;
		height: auto;
		min-height: 112px;
		font-size: 12px;
		line-height: 1.3em;
	}
	#sidebar ul.cat li.right {
		border-right: 0;
	}
	#sidebar ul.cat + ul.cat li {
		border-top: 1px solid #e9e9e9;
	}
	#sidebar > div.box,
	.box {
		width: auto;
	}

	/* Inner pages */
	.profileBuyerItem1 a.opLink,
	.profileBuyerItem1 a.opID,
	.profileBuyerItem1 p.opID,
	.profileBuyerItem1 div.opID,
	.profileBuyerItem1 h1.profileBuyerTitle,
	ol.files {
		width: auto;
		max-width: 100%;
	}
	#content #sms-parking {
		background-size: 100% auto;
	}
	#content #sms-parking .smsParkingText,
	#content #sms-parking .smsParkingMap {
		float: none;
		width: auto;
		margin: 0 0 20px;
	}
	li.comment .comment-body,
	li.comment li.depth-2 .comment-body,
	li.comment li.depth-3 .comment-body,
	li.comment li.depth-4 .comment-body,
	li.comment li.depth-5 .comment-body {
		width: auto;
	}
	.commentlist li .comment-meta {
		position: static !important;
		right: auto !important;
	}
	#content-bg table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* Footer */
	.footer-text {
		margin: 0;
	}
}


/* Phone (<= 767px)
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	/* Single column */
	.container_24 .grid_7,
	.container_24 .grid_7.grid_71,
	.container_24 .grid_17 {
		display: block;
		float: none;
		width: auto !important;
		margin: 0 !important;
	}

	/* On inner pages show the page content before the sub-page menu */
	body:not(.home) #wrapper {
		display: flex;
		flex-direction: column;
	}
	body:not(.home) #wrapper > #sidebar {
		order: 1;
	}
	body:not(.home) #wrapper > .clear {
		order: 2;
	}

	/*
		On the homepage show the highlights slider (and the live-stream marquee, when shown)
		before the sidebar. #content steps out of the way so its children can be reordered;
		the EU logo and the news tabs stay after the sidebar.
	*/
	body.home #wrapper {
		display: flex;
		flex-direction: column;
	}
	body.home #wrapper > #content {
		display: contents;
	}
	body.home #content > .marquee-container {
		order: -2;
	}
	body.home #content > #slider-wrapper {
		order: -1;
	}

	/* Header: everything stacked */
	.logo {
		margin: 10px 0 8px;
	}
	.logo img {
		max-height: 70px !important;
	}
	.logo h1,
	.logo h2 {
		font-size: 22px !important;
	}
	#header-widget,
	#header-sidebar {
		position: static;
		top: auto;
		right: auto;
	}
	#header-widget {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 8px;
	}
	.socialmedia-buttons {
		margin: 0;
	}
	#header-sidebar {
		display: none;
	}
	#top-search {
		clear: both;
		margin: 0 0 10px;
	}

	/*
		Main menu: hidden behind the toggle button (markup in header.php, script in footer.php),
		opens as a two-column grid of buttons. Drop-downs are off; parent pages list their children.
	*/
	.menu-toggle {
		position: absolute;
		top: 3px;
		right: 0;
		display: flex;
		align-items: center;
		height: 40px;
		padding: 0 12px;
		background: #fff;
		border: 1px solid #e9e9e9;
		border-radius: 3px;
		color: #195523;
		font: bold 13px/1 'Roboto', Arial, sans-serif;
		text-transform: uppercase;
		cursor: pointer;
	}
	.menu-toggle-icon,
	.menu-toggle-icon:before,
	.menu-toggle-icon:after {
		display: block;
		width: 20px;
		height: 2px;
		background: #50aa60;
		transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
	}
	.menu-toggle-icon {
		position: relative;
		margin-right: 8px;
	}
	.menu-toggle-icon:before,
	.menu-toggle-icon:after {
		content: "";
		position: absolute;
		left: 0;
	}
	.menu-toggle-icon:before {
		top: -6px;
	}
	.menu-toggle-icon:after {
		top: 6px;
	}
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
		background: transparent;
	}
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon:before {
		transform: translateY(6px) rotate(45deg);
	}
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon:after {
		transform: translateY(-6px) rotate(-45deg);
	}
	.logo {
		padding-right: 110px;
	}
	nav.primary,
	nav.en {
		display: none;
		margin: 0 0 10px;
	}
	nav.primary.is-open {
		display: block;
	}
	nav.primary p {
		display: none;
	}
	#primary-menu #topnav > li {
		width: 50% !important;
		box-sizing: border-box;
		border-bottom: 1px solid #e9e9e9;
	}
	#primary-menu #topnav > li:nth-child(odd) {
		border-right: 1px solid #e9e9e9;
	}
	#primary-menu #topnav > li:last-child:nth-child(odd) {
		width: 100% !important;
		border-right: 0;
	}
	/* hide the bottom border of the last row */
	nav.primary {
		overflow: hidden;
	}
	#primary-menu #topnav {
		margin-bottom: -1px;
	}
	#primary-menu #topnav > li > a {
		padding: 0 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}
	#primary-menu #topnav ul {
		display: none !important;
	}
	
	h1 {
		padding: 0;
	}
	
	#main {
		font-size: 0.9em;
	}
	p {
		font-size: 0.95rem;
	}

	/* Home */
	#slider-wrapper,
	#tabs-content {
		padding: 10px;
	}
	.tw-content {
		padding: 0;
	}
	.latestpost li,
	.latestpost li.even {
		float: none;
		width: auto;
		margin-right: 0 !important;
	}
	.nivo-caption p strong {
			font-size: 17px;
	}
	.nivo-caption p i {
		top: 22px;
		right: -15px;
	}

	/* Banner tiles: two per page here, so there are twice as many dots; let them wrap */
	body .g-slider {
		height: auto !important;
		padding-bottom: 6px !important;
	}
	body .g-slider .cpanel {
		height: auto;
		overflow: visible;
	}
	body .g-slider .center-panel,
	body .g-slider .index-panel,
	body .g-slider ul.indexes {
		position: static !important;
		float: none;
		width: auto !important;
		height: auto;
		margin: 0 !important;
		left: auto !important;
	}
	body .g-slider ul.indexes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	body .g-slider ul.indexes li {
		margin: 5px 3px;
	}
	/* Sidebar */
	#sidebar ul.cat li,
	#sidebar ul.cat li.right {
		min-height: 104px;
		padding-top: 8px;
	}

	/* Inner pages */
	#content #content-bg .inner {
		padding: 10px 12px 20px;
	}
	#gallery .portfolio li {
		width: 100% !important;
	}
	#gallery .portfolio li a.image-wrap {
		width: auto;
	}
	#content_rss img.event-img {
		float: none;
		width: 100%;
		margin: 0 0 10px;
		box-sizing: border-box;
	}
	.profileBuyerItem a,
	.profileBuyerItem .period {
		width: auto;
	}
	#commentform input[type=text],
	#commentform textarea {
		width: 100%;
		box-sizing: border-box;
	}
	.one_half,
	.one_third,
	.two_third,
	.one_fourth,
	.three_fourth {
		float: none !important;
		width: auto !important;
		margin-right: 0 !important;
	}

	/* Footer */
	nav.footer {
		padding: 15px 0;
	}
	nav.footer div {
		float: none;
		clear: both;
		padding: 10px 0 0;
	}
	nav.footer ul li {
		padding: 0 14px 8px 0;
	}
	.footer-text {
		padding: 12px 0 20px;
	}
}


/* Small phone (<= 480px)
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {

	.logo a {
		display: flex;
	}
	.logo img {
		max-height: 56px !important;
	}
	.logo h1,
	.logo h2 {
		font-size: 18px !important;
	}
	#primary-menu #topnav > li > a {
		font-size: 12px;
	}
	.tw-tabbed-nav li a {
		padding: 0 12px !important;
		font-size: 11px;
	}
	.post-thumb-3 img {
		max-width: 40%;
		margin-right: 12px;
	}
	#searchform {
		max-width: 100%;
	}
}