/*
Theme Name: National Plan
Description: Reponsive CSS for the National Plan to Reduce Violence Against Women and Children website
Version: 1
Author: Vicky Miller, Chris Lamb
*/

/*--------------------------------------------------------------
  Navigation toggle button
-------------------------------------------------------------- */
#_navigation {
	background-color: #4ea366;
	border: none;
	bottom: 20px;
	color: #fff;
	cursor: pointer;
	display: none;
	height: 50px;
	padding: 0 11px;
	position: absolute;
	right: 20px;
	transition: all 1s;
	width: 50px;
}
#_navigation .lines {
	background-color: #032e26;
	display: block;
	height: 3px;
	width: 28px;
}
#_navigation .lines:before,
#_navigation .lines:after {
	background-color: #032E26;
  content: '';
  display: block;
	height: 3px;
	position: relative;
	transition: all .3s ease;
	transform-origin: 50%;
	width: 28px;
}
#_navigation .lines:before {
	top: -8px;
}
#_navigation .lines:after {
	top: 5px;
}
#_navigation .words {
	display: none;
}
#_navigation:hover,
#_navigation:focus,
#_navigation.active  {
	background-color: #a8d1b3;
	transition: all 1s;
}
#_navigation.active .lines {
	background-color: transparent;
}
#_navigation.active .lines:before {
	transform: rotate3d(0,0,1,45deg);
	top: 0;
}
#_navigation.active .lines:after {
	transform: rotate3d(0,0,1,-45deg);
	top: -3px;
}
#_navigation:after {
	border: solid transparent;
	border-width: 0 10px 0 10px;
	border-bottom-color: #4ea366;
	bottom: -20px;
	content: '';
	height: 0;
	left: 50%;
	margin-left: -10px;
	position: absolute;
	transition: all .2s;
	width: 0;
}
#_navigation.active:after {
	border-width: 10px;
}
/*--------------------------------------------------------------
  Search toggle button
-------------------------------------------------------------- */
#searchtoggle {
	background: #4ea366 url(../images/icon-search.svg) center center no-repeat;
	border: none;
	bottom: 20px;
	color: #fff;
	cursor: pointer;
	display: none;
	height: 50px;
	position: absolute;
	right: 84px;
	text-indent: -9999em;
	transition: all 1s;
	width: 50px;
}
#searchtoggle:hover,
#searchtoggle:focus,
#searchtoggle.active  {
	background-color: #a8d1b3;
	transition: all 1s;
}
#searchtoggle:after {
	border: solid transparent;
	border-width: 0 10px 0 10px;
	border-bottom-color: #4ea366;
	bottom: -20px;
	content: '';
	height: 0;
	left: 50%;
	margin-left: -10px;
	position: absolute;
	transition: all .2s;
	width: 0;
}
#searchtoggle.active:after {
	border-width: 10px;
}
/*--------------------------------------------------------------
  Menu Expanders
-------------------------------------------------------------- */
#mainnav.mobile a.show-hide {
	background: transparent url(../images/chevron-down.svg) center 22px no-repeat;
	background-size: 10px;
	border: none;
	height: 50px;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 0s;
	width: 45px;
	z-index: 201;
}
#mainnav.mobile a.show-hide:hover {
	background-color: #a8d1b3;
}
#mainnav.mobile a.show-hide.expanded {
	background-image: url(../images/chevron-up.svg);
}
/*--------------------------------------------------------------
  1220px breakpoint. Switch to responsive. Tablets
-------------------------------------------------------------- */
@media all and (max-width: 1220px) {
	.fixwidth {
		width: auto;
	}
	img, svg {
		max-width: 100%;
	}
	#_navigation {
		display: block;
	}
	#searchtoggle {
		display: block;
	}
	#site-branding > .fixwidth {
		padding: 0 20px 20px 20px;
		position: static;
	}
	#site-branding span.site-name {
		display: block;
		font-size: 1.7em;
		margin-right: 150px;
	}
	/* Mobile navigation */
	#mainnav {
		display: none;
		font-weight: 500;
		position: absolute;
		width: 100%;
		z-index: 110;
	}
	#mainnav li {
		display: block;
	}
	#mainnav.mobile li.menu-item-has-children > a:first-of-type {
		background-image: none;
	}
	/* Sub menus */
	#mainnav ul.mobile {
		display: none;
		font-weight: 400;
	}
	/* Active path states */
	#mainnav.mobile li.current-menu-item > a,
	#mainnav.mobile li.current-page-ancestor > a {
		background-color: transparent;
		text-decoration: underline;
	}
	#mainnav.mobile li.current-menu-item > a:hover,
	#mainnav.mobile li.current-menu-item > a:focus,
	#mainnav.mobile li.current-page-ancestor > a:hover,
	#mainnav.mobile li.current-page-ancestor > a:focus {
		background-color: #a8d1b3;
	}
	/* Search */
	#search-block-form {
		background-color: #4ea366;
		display: none;
		left: 0;
		right: auto;
		top: 100%;
		width: 100%;
		z-index: 109;
	}
	#search-block-form form {
		margin: 30px 20px;
		text-align: center;
	}
	#search-block-form form label {
		margin-right: 10px;
	}
	#search-block-form input {
		border: none;
		font-size: 1.1em;
		height: 50px;
		width: calc(100% - 64px);
	}
	#search-block-form input.search-submit {
		background: #032E26 url(../images/icon-search-r.svg) center center no-repeat;
		height: 50px;
		position: relative;
		width: 50px;
	}
	#search-block-form input.search-submit:hover,
	#search-block-form input.search-submit:focus {
		background-color: #044a43;
	}
	/* Layout tweaks */
	#leftnav {
		display: none;
	}
	#articlewrap,
	#articlewrap.hasleftnav,
	.home #articlewrap {
		margin: 20px 20px 0 20px;
	}
	#readspeaker_button {
		margin-right: 20px;
	}
	#articlewrap figure.right {
		width: 20vw;
	}
	/* Homepage stuff */
	.home #articlewrap {
		background-size: 25% auto;
		padding-bottom: 20px;
		padding-right: 28%;
	}
	#home-stats-cta {
		padding: 10px 20px;
	}
	.home-stats-text {
		background-position: left 50%;
		margin: 0 auto;
		min-height: 200px;
		padding: 20px 0 0 200px;
		position: static;
		width: 50%;
	}
	.home-stats-text p {
		 padding: 0;
	}
	.home-stats-ctas {
		margin: 0;
	}
	#home-latest-news {
		background-size: 25% auto;
		margin: 30px 20px;
		padding-right: 30%;
	}
	.tiles-nav {
		justify-content: space-between;
	}
	.tiles-nav > div.tile {
		margin-right: 0;
		width: calc(50% - 22px);
	}
	#footer {
		padding: 20px;
	}
}
/*--------------------------------------------------------------
  680px breakpoint. Phones
-------------------------------------------------------------- */
@media screen and (max-width: 680px) {
	#topribbon ul {
		text-align: center;
	}
	#topribbon li {
		display: block;
		margin: 0;
	}
	#topribbon a {
		display: block;
	}
	#topribbon a > span {
		padding: 9px 16px;
	}
	#articlewrap figure.right {
		width: 28vw;
	}
	#site-branding {
	  min-height: 100px;
	}
	#site-branding #ausgov_logo {
	  margin: 18px 0 10px 0;
	}
	form .webform-component {
    width: 100%;
	}
	#footer .widget-container {
		margin: 0 0 20px 0;
		width: 100%;
	}
}
/*--------------------------------------------------------------
  580px breakpoint. Phones and potatos
-------------------------------------------------------------- */
@media screen and (max-width: 580px) {
	#site-branding span.site-name {
		font-size: 1.3em;
	}
	.home #articlewrap {
		background: none;
		padding-right: 0;
	}
	.home-stats-text {
		background-position: 50% 20px;
		padding: 220px 0 0 0;
		width: 90%;
	}
	#home-latest-news {
		background: none;
		padding-right: 0;
	}
	button.button, a.button {
		display: block;
	}
	/* Tiles  */
	div.tiles-nav > div.tile {
	  width: 100%;
	}
}