/* Default responsive css is in framework css so that hidden items are hidden even when
	responsiveness is disabled */

/* DESKTOPS */
@media screen and (min-width: 980px) {
	.ipsResponsive_hideDesktop {
		display: none !important;
	}
}

/* TABLETS */
@media screen and (min-width: 768px) and (max-width: 979px) {
    .menuHeader, .junky-header {
  	display: none !important;
  }
	/*.ipsResponsive_showTablet, .ipsResponsive_hideDesktop, .ipsResponsive_hidePhone,*/
	.ipsResponsive_hideDesktop.ipsResponsive_inline,
	.ipsResponsive_showTablet.ipsResponsive_inline {
		display: inline !important;
	}
	.ipsResponsive_hideDesktop.ipsResponsive_inlineBlock,
	.ipsResponsive_showTablet.ipsResponsive_inlineBlock {
		display: inline-block !important;
	}
	.ipsResponsive_hideDesktop.ipsResponsive_block,
	.ipsResponsive_showTablet.ipsResponsive_block {
		display: block !important;
	}

	.ipsResponsive_hideTablet, .ipsResponsive_showDesktop, .ipsResponsive_showPhone,
	.ipsResponsive_hideTablet.ipsResponsive_inline,
	.ipsResponsive_hideTablet.ipsResponsive_inlineBlock,
	.ipsResponsive_hideTablet.ipsResponsive_block,
	.ipsResponsive_showDesktop.ipsResponsive_inline,
	.ipsResponsive_showDesktop.ipsResponsive_inlineBlock,
	.ipsResponsive_showDesktop.ipsResponsive_block {
		display: none !important;
	}
}

/* PHONES */
@media screen and (max-width: 767px) {
	.ipsResponsive_showPhone, .ipsResponsive_hideDesktop, .ipsResponsive_hideTablet,
	.ipsResponsive_hideDesktop.ipsResponsive_inline,
	.ipsResponsive_showPhone.ipsResponsive_inline {
		display: inline !important;
	}
	.ipsResponsive_hideDesktop.ipsResponsive_block,
	.ipsResponsive_showPhone.ipsResponsive_block {
		display: block !important;
	}
	.ipsResponsive_hideDesktop.ipsResponsive_inlineBlock,
	.ipsResponsive_showPhone.ipsResponsive_inlineBlock {
		display: inline-block !important;
	}
	.ipsResponsive_hidePhone, .ipsResponsive_showDesktop, .ipsResponsive_showTablet,
	.ipsResponsive_showDesktop.ipsResponsive_inline,
	.ipsResponsive_showDesktop.ipsResponsive_inlineBlock,
	.ipsResponsive_showDesktop.ipsResponsive_block,
	.ipsResponsive_hidePhone.ipsResponsive_inline,
	.ipsResponsive_hidePhone.ipsResponsive_inlineBlock,
	.ipsResponsive_hidePhone.ipsResponsive_block {
		display: none !important;
	}
}

@media screen and (max-width: 979px) {
  
	/* Prevent a floating element from floating on mobile devices */
  .menuHeader, .junky-header {
  	display: none !important;
  }
	.ipsResponsive_noFloat {
		float: none !important;
		margin-top: 5px;
	}

	#ipsLayout_header > header {
		padding-top: 0;
		padding-bottom: 0;
	}

	#elSiteTitle {
		font-size: 24px;
	}

	#ipsLayout_footer ul {
		text-align: center;
		width: 100%;
	}

	#elCopyright {
		clear: both;
		float: none;
		text-align: center;
	}

	.ipsHeader_tabs {
		display: none;
	}

	/* Turns the last-but-one breadcrumb item in a 'Back' button, like <[ Home ] */
	.ipsApp_front .ipsSubNavigation .ipsBreadcrumb li, .ipsApp_front .ipsBreadcrumb li i {
		display: none;
	}

	.ipsBreadcrumb li {
		overflow: visible;
	}

#elMobileBreadcrumb {
	top: 10px;
	position: absolute;
	height: 30px;
	font-size: 11px;
    display: block;
    text-align: center;
    text-shadow: none;
    line-height: 30px;
    font-weight: 700;
	min-width: 40px;
	background-color: {theme="mobile_back"};
}
	html[dir="ltr"] #elMobileBreadcrumb {
		left: 24px;
		border-radius: 0 6px 6px 0;
		padding: 0 10px 0 0;
	}
	html[dir="rtl"] #elMobileBreadcrumb {
		right: 24px;
		border-radius: 6px 0 0 6px;
		padding: 0 0 0 10px;
	}
	
	#elMobileBreadcrumb a {
		font-size: 11px !important;
		line-height: 30px !important;
		display: inline-block;
		position: relative;
		white-space: nowrap;
		max-width: 70px;
		height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: normal;
		z-index: 50;
		color: {theme="mobile_back_font"} !important;
	}

	#elMobileBreadcrumb:before {
		display: block;
		position: absolute;
		font-size: 28px;
		line-height: 30px;
		overflow: hidden;
		text-shadow: none;
		content: '';
		top: 0;
		bottom: 0;
		width: 0px;
		border-style: solid;
		border-width: 15px;
		z-index: 0;
		color: {theme="mobile_back"};
		transform: scaleX(0.666667) rotate(45deg);
	}
	html[dir="ltr"] #elMobileBreadcrumb:before {
		left: -15px;
		border-radius: 15px 15px 15px 1px;
		border-color: transparent transparent {theme="mobile_back"} {theme="mobile_back"};
	}
	html[dir="rtl"] #elMobileBreadcrumb:before {
		right: -15px;
		border-radius: 15px 1px 15px 15px;
		border-color: {theme="mobile_back"} {theme="mobile_back"} transparent transparent;
	}
}