/*
Theme Name: Intercountry Adoption
Description: Reponsive CSS for the Intercountry Adoption website
Version: 2015
Author: Vicky Miller
*/
/***********************************/
/************ Defaults *************/
/***********************************/
#_navigation {
	background-color: #FFF;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	display: none;
	padding: 25px 20px 10px 20px;
	position: absolute;
	left: 10px;
	top: 10px;
	margin: 10px;
	text-transform: uppercase;
	transition: all 1s;
}
#_navigation .lines {
	background-color: #15304D;
	border-radius: 2px;
	display: block;
	height: 4px;
	width: 40px;
}
.lines:before,
.lines:after {
	background-color: #15304D;
	border-radius: 2px;
  content: '';
  display: block;
	height: 4px;
	position: relative;
	transition: all .3s ease;
	transform-origin: 50%;
	width: 40px;
}
.lines:before {
	top: -8px;
}
.lines:after {
	top: 4px;
}
#_navigation .words {
	display: block;
	padding-top: 20px;
}
#_navigation:hover,
#_navigation:focus {
	background-color: #E9E9E9;
	transition: all 1s;
}
#_navigation.active .lines {
	width: 0;
}
#_navigation.active .lines:before {
	transform: rotate3d(0,0,1,45deg);
	top: 0px;
}
#_navigation.active .lines:after {
	transform: rotate3d(0,0,1,-45deg);
	top: -4px;
}
/***********************************/
/********** Reduced size ***********/
/***********************************/
@media all and (max-width: 1190px) {
	body.home,
	#wrapper {
		background-size: 80% auto;
	}
	header {
		padding: 0;
	}
	header img {
		padding-left: 120px;
		max-width: 70%;
	}
	#masthead {
		border-bottom: 3px solid #00A89E;
		height: auto;
		min-height: 83px;
	}
	#_navigation {
		display: block;
	}
	#mob-nav {
		background-color: #FFF;
		box-shadow: 0 2px 6px 0 #666;
		display: none;
		margin: 3px 0 0 0;
		padding-bottom: 50px;
		position: absolute;
		width: 50%;
		z-index: 9999;
		line-height:1.2em;
	}
	.headerph,
	.headermail {
		display: none;
	}
	#mainnav {
		border: none;
		border-radius: 0;
		bottom: 0;
		height: auto;
		position: static;
		background-color: #00857C;
	}
	#mainnav > ul {
		font-size: 0.9em;
		line-height: 1.8em;
	}
	#mainnav > ul > li {
		float: none;
		border: none;
	}
	#mainnav > ul > li a {
		border-bottom: 1px solid #02645D;
		color: #FFF;
		height: auto;
		padding: 12px 20px;
		text-align: left;
	}
	#mob-nav #mainnav a {
		border-radius: 0;
	}
	#mainnav > ul > li a:hover,
	#mainnav > ul > li a:focus {
		color: #000;
		background-color: #F6F5F2;
	}
	#mainnav > ul > li:first-child > a {
    	background: #00857C url(images/home-mobile.png) 14px center no-repeat;
		background-size: auto 56%;
		text-indent: 30px;
		width: auto;
	}
	#mainnav > ul > li:first-child > a:hover,
	#mainnav > ul > li:first-child > a:focus {
   		background: #F6F5F2 url(images/home.png) 14px center no-repeat;
		background-size: auto 56%;
		color: #000;
	}
	#mainnav > ul > li.current-menu-item,
	#mainnav > ul > li.current_page_ancestor {
	    background-image: none;
	}
	/* Sub Menus */
	.mob-sub-menu {
		background-color: #007169;
		display: none;
		font-size: .9em;
	}
	.mob-sub-menu2 {
		background-color: #007169;
		font-size: .9em;
	}
	#mainnav .mob-sub-menu li {
		line-height: 1.2em;
	}
	#mainnav .mob-sub-menu li a {
		padding: 10px 30px;
	}
	.mob-sub-menu2 li {
		line-height: 1.2em;
	}
	.mob-sub-menu2 li a {
		padding: 10px 30px;
	}
	/* Expanders */
	#mainnav .show-hide {
		background: url(images/child-show.png) center center no-repeat;
		border: none;
		float: right;
		height: 22px;
		width: 16px;
		display: block;
		position: relative;
		z-index: 1;
	}
	#mainnav .show-hide.expanded {
		background: #007169 url(images/child-hide.png) center center no-repeat;
	}
	#mainnav .show-hide:hover,
	#mainnav .show-hide:focus {
		background: #339D96 url(images/child-show-active.png) center center no-repeat;
	}
	#mainnav .show-hide.expanded:hover,
	#mainnav .show-hide.expanded:focus {
		background: #1A7F78 url(images/child-hide-active.png) center center no-repeat;
	}

	/* Search Form */
	.search-form {
		background-color: #FFF;
		bottom: 0;
		left: 0;
		padding: 5px;
		right: auto;
		top: auto;
		width: 96%;
	}
	.search-form .search-field {
		width: 70%;
	}
	.search-form .search-field {
		width: 70%;
	}
	/* Layout tweaks */
	#contentwrap {
		padding: 10px;
	}
	#faq-tab {
		display: none;
	}
	#leftnav h2 {
		left: 0;
		position: inherit;
		padding-bottom: 4px;
		font-size: 150%;
		color: #fff;
		margin: 0 0 0 0.5em;
	}
	#leftnav {
		/*display: inline-block;*/
		display: block;
		padding: 10px;
		border: 1px solid #008577;
		border-radius: 8px;
		float: none;
		/*width: 98%;*/
		width: 45%;
		margin-bottom: 20px;
		font-size: 1em;
	}
	#leftnav ul {line-height: 0.7em;}
	#leftnav ul li {
		list-style: none;
		/*position: relative;
		display: inline;
		float: left;
		height: auto;
		width: 14%;
		padding: 0 10px;
		text-align: center;
		border-right: 1px solid #E1E1E1;
		min-height: 75px;*/
	}
	#leftnav ul li:last-child {
		border-right: none;
	}
	#leftnav li {
		border-bottom: none;
	}
	#leftnav a {
		text-decoration: none;
	}
	#leftnav a:hover, #mobilemainnav a:focus {
		text-decoration: underline;
		/*background-color: transparent;*/
	}
	#leftnav li:first-child a {

		border-top-left-radius: 0px;}

	#articlewrap.hasleftnav {
		border-radius: 8px;
		margin: 0;
	}

	/*In this section nav */
	#leftnav h2 a  {
		background: url(images/section-arrow-show.png) right center no-repeat;
	}
	#leftnav h2 a.expanded  {
		background: url(images/section-arrow-hide.png) right center no-repeat;
	}
	#leftnav h2 a, #leftnav h2 a:active, #leftnav h2 a:hover, #leftnav h2 a:focus {
		background-color: #008577;
		color: #fff;}

	.section > ul {display: none;}
	/* Homepage stuff */
	#hero-tabs {
		background-size: 50%;
		font-size: 1.3em;
		height: auto;
		margin: 30px 0;
	}
	#hero-tabs ul {
		background-color: #162F4D;
		margin-left: 50%;
		position: static;
		width: auto;
	}
	#content #hero-tabs li a {
		background-size: auto 45px;
		padding: 25px 20px 25px 100px;
	}
	#how-it-works {
		background-position: center 20px;
		background-size: 50%;
		margin: 30px 0;
	}
	#how-it-works h2,
	#how-it-works p {
		width: auto;
	}
	#how-it-works a {
		margin-top: 15px;
		position: static;
	}
	#workbook a.order {
		right: 40px;
	}
	#family-stories {
		margin: 20px 0;
	}
	#family-stories .intro {
		width: 300px;
	}
	#family-stories .intro h2,
	#family-stories .intro p {
		padding-left: 20px;
		padding-right: 20px;
	}
	#family-stories .white {
		margin-left: 300px;
		padding: 16px;
	}
	#family-stories .white h2 {
		font-size: 1.5em;
	}
	#family-stories .white p {
		font-size: 1.2em;
	}
	#front-faqs {
		margin: 30px 0;
	}
	#front-faqs .intro {
		width: 300px;
	}
	#front-faqs .intro h2,
	#front-faqs .intro p {
		padding-left: 20px;
		padding-right: 20px;
	}
	#front-faqs .white {
		margin-left: 300px;
		padding: 16px;
	}
	#front-faqs .white dl {
		font-size: .9em;
	}
	#articlewrap {
		padding: 10px 15px;
	}
	.breakouts {
		margin: 0 -15px;
		padding: 10px 40px;
	}
	.workbook {
		float: none;
	}
}
@media screen and (max-width: 800px) {
#workbook p {
		width: 60%;
	}
}

/***********************************/
/********** Compact size ***********/
/***********************************/
@media screen and (max-width: 620px) {

	header img {
		padding-left: 70px;
	}
	#_navigation {
		border-radius: 0;
		height: 100%;
		margin: 0;
		left: 0;
		padding: 25px 10px 14px 10px;
		top:0;
	}
	#mob-nav {
		width: 100%;
	}
	#contentwrap {
		padding: 10px;
	}
	#leftnav {
		width: 94%;
	}
	#hero-tabs {
		background-image: none;
	}
	#hero-tabs ul {
		margin: 0;
		width: auto;
		background:	#162f4d;
		border-radius: 8px;
	}
	#hero-tabs .tab1 a,
	#hero-tabs .tab2 a,
	#hero-tabs .tab3 a,
	#hero-tabs .tab4 a {
		background-size: 20%;
	}
	#hero-tabs li:first-child a,
	#hero-tabs li:first-child a:focus,
	#hero-tabs li:first-child a:hover {
		border-top-left-radius: 8px;
	}
	#hero-tabs li:last-child a,
	#hero-tabs li:last-child a:focus,
	#hero-tabs li:last-child a:hover {
		border-bottom-left-radius: 8px;
	}

	#news {
		margin: 50px 0 50px 0;
	}
	#news .intro {
		border-radius: 8px 8px 0 0;
		min-height: 0;
		width: 85%;
		float: none;
		height: auto;
	}

	#news .intro p {
		width: 100%;
	}
	#news .white {
		margin-left: 0;
		border-radius: 0 0 8px 8px;
		min-height: auto;
	}

	#family-stories {
		margin: 20px 0 50px 0;
		background-color:transparent;
	}
	#family-stories .intro {
		margin: 0 0 50px 0;
	}
	#family-stories-video a {
		padding: 35px;
	}
	#how-it-works {
		background: #008577 none;
		padding: 20px;
		margin: 20px 0;
		background-size: 95%;
	}
	#how-it-works h2,
	#how-it-works p {
		width: 100%;
		text-align: center;
		font-size: 150%;
	}
	#how-it-works p,
	#workbook p,
	#news p {
		font-size: 110%;
	}
	#how-it-works a {
		right: 30px;
		top: 234px;
		margin: 20px 0;
		padding: 5px 0;
		width: 100%;
	}
	#workbook {
		padding: 35px;
	}
	#workbook a {
		height: 29px;
		width: auto;
	}
	#workbook p {
		width: 50%;
	}
	#workbook a.order {
		position: static;
	}
	#workbook h2, #workbook p {
		width: 100%;
	}
	#family-stories .intro, #front-faqs .intro{
		width: 100%;
		border-radius: 8px 8px 0 0;
		height: auto;
		min-height: 0;
		margin: 0;
	}
	#family-stories .white, #front-faqs .white{
		margin: 0 0 20px 0;
		float: none;
		border-radius: 0 0 8px 8px;
		padding: 10px;
		min-height: 360px;
		height: auto;
	}
	#family-stories h2,
	#front-faqs h2,
	#front-faqs .white dt,
	#news h2,
	#workbook h2 {
		font-size: 150%;
	}
	#family-stories .intro p,
	#family-stories .white p,
	#front-faqs .intro p,
	#front-faqs .white p,
	#front-faqs .white dd,
	#news .intro p,
	#workbook .intro p {
		font-size: 100%;
	}
	#front-faqs {
		background-color:transparent;

	}
	h1 {
		margin: 0 0 0.6em 0;
	}
	#crumbs {
		padding: 8px 0 0 0px;
	}
	#footer .textwidget {
		background-position: left top;
		background-size: 140px auto;
		font-size: 1em;
    		margin: 20px auto;
    		padding: 0 0 0 150px;
    		width: 50%;
	}
	#footer .textwidget a {
		font-size: 1em;
	}
	.footerph span {
		font-size: .6em;
		padding-top: 5px;
	}
	.footerph {
		font-size: 1.1em;
		padding-top: 20px;
		margin-top: 10px;
	}
	.footermail {
		padding-top: 0px;
	}
}